WiP on adding minimal editor after frontend file upload

Author: jrief

client/browser/BrowserEditor.tsx

@@ -1,35 +1,99 @@
-import React, {lazy, Suspense, useMemo} from 'react';
+import React, {lazy, Suspense, useEffect, useMemo, useState} from 'react';
+import {createRoot} from 'react-dom/client';
 import SelectLabels from '../finder/SelectLabels';
 
 
+function EditorForm(props) {
+	const {mainContent, file_info, settings} = props;
+	const [formHtml, setFormHtml] = useState(props.form_html);
+
+	useEffect(() => {
+		const shadowRoot = mainContent.getRootNode();
+		if (!(shadowRoot instanceof ShadowRoot))
+			return;
+		const labelsElement = shadowRoot.getElementById('id_labels');
+		if (!(labelsElement instanceof HTMLSelectElement))
+			return;
+		if (settings.labels) {
+			// replace the original <select multiple name="labels"> element with the "downshift" component
+			if (labelsElement.nextElementSibling?.classList.contains('select-labels-container')) {
+				labelsElement.nextElementSibling.remove();
+			}
+			const divElement = document.createElement('div');
+			divElement.classList.add('select-labels-container');
+			labelsElement.insertAdjacentElement('afterend', divElement);
+			const root = createRoot(divElement);
+			root.render(<SelectLabels labels={settings.labels} initial={[]} original={labelsElement}/>);
+		}
+		labelsElement.style.display = 'none';
+	}, [formHtml]);
+
+	function handleSave() {
+		const changeUrl = `${settings.baseUrl}${file_info.id}/change`;
+		const form = mainContent.querySelector('form');
+		if (!(form instanceof HTMLFormElement))
+			throw new Error('Form not found');
+		const formData = new FormData(form);
+		fetch(changeUrl, {
+			method: 'POST',
+			body: formData,
+			headers: {
+				'X-CSRFToken': settings.csrfToken,
+			},
+		}).then(async response => {
+			if (response.ok) {
+				const content = await response.json();
+				if ('file_info' in content) {
+					settings.selectFile(file_info);
+				} else if ('form_html' in content) {
+					setFormHtml(content.form_html);
+				} else {
+					alert('Unexpected response');
+				}
+			} else {
+				alert(response.statusText);
+			}
+		});
+	}
+
+	function handleDismiss() {
+		window.location.reload();
+	}
+
+	return (
+		<form>
+			<div dangerouslySetInnerHTML={{__html: formHtml}}/>
+			<div className="button-row">
+				<button type="button" className="default" onClick={handleSave}>{gettext("Save")}</button>
+				<button type="button" className="dismiss" onClick={handleDismiss}>{gettext("Dismiss")}</button>
+			</div>
+		</form>
+	);
+}
+
+
 export default function BrowserEditor(props) {
-	const {uploadedFile, mainContent} = props;
+	const {uploadedFile, mainContent, settings} = props as {uploadedFile: any, mainContent: HTMLElement, settings: any};
 	const DetailEditor = useMemo(() => {
 		if (uploadedFile.file_info.browser_component) {
 			const component = `./components/browser/${uploadedFile.file_info.browser_component}.js`;
 			const LazyItem = lazy(() => import(component));
 			return (props) => (
-				<div className="detail-editor">
+				<div className="browser-editor">
 					<Suspense fallback={<span>{gettext("Loading...")}</span>}>
 						<LazyItem fileInfo={props.file_info} />
 					</Suspense>
-					<form>
-						<SelectLabels settings={{labels: uploadedFile.labels, mainContent: mainContent}} />
-						<div dangerouslySetInnerHTML={{__html: props.form_html}} />
-					</form>
+					<EditorForm {...props} />
 				</div>
 			);
 		}
 		return (props) => (
-			<div className="detail-editor">
+			<div className="browser-editor">
 				<img src={props.file_info.thumbnail_url} />
-				<form>
-					<SelectLabels settings={{labels: uploadedFile.labels, mainContent: mainContent}} />
-					<div dangerouslySetInnerHTML={{__html: props.form_html}} />
-				</form>
+				<EditorForm {...props} />
 			</div>
 		);
 	}, [uploadedFile.file_info.browser_component]);
 
-	return <DetailEditor {...uploadedFile} />;
+	return <DetailEditor mainContent={mainContent} {...uploadedFile} settings={settings} />;
 }

client/browser/FileSelectDialog.tsx

@@ -12,7 +12,7 @@ import FigureLabels from '../finder/FigureLabels';
 import BrowserEditor from './BrowserEditor';
 import FileUploader	 from '../finder/FileUploader';
 import FolderStructure from './FolderStructure';
-import Menu from './Menu';
+import MenuBar from './MenuBar';
 
 
 function StaticFigure(props) {
@@ -67,16 +67,31 @@ const FilesList = memo((props: any) => {
 
 
 export default function FileSelectDialog(props) {
-	const {baseUrl, csrfToken, realm, selectFile} = props;
+	const {realm, baseUrl, csrfToken, selectFile} = props;
 	const [structure, setStructure] = useState({root_folder: null, last_folder: null, files: null});
 	const [uploadedFile, setUploadedFile] = useState(null);
 	const ref = useRef(null);
 	const uploaderRef = useRef(null);
+	const dialog = ref.current?.closest('dialog');
 
 	useEffect(() => {
 		getStructure();
 	}, []);
 
+	useEffect(() => {
+		if (!dialog) {
+			return;
+		}
+		const dialogClosed = () => {
+			setUploadedFile(null);
+		};
+
+		dialog.addEventListener('close', dialogClosed);
+		return () => {
+			dialog.removeEventListener('close', dialogClosed);
+		};
+	}, [dialog]);
+
 	async function getStructure() {
 		const response = await fetch(`${baseUrl}structure/${realm}`);
 		if (response.ok) {
@@ -114,27 +129,31 @@ export default function FileSelectDialog(props) {
 		setUploadedFile(uploadedFiles[0]);
 	}
 
-	return structure.root_folder && (<>
+	return (<>
 		<div className="wrapper" ref={ref}>
-			<Menu
+			{uploadedFile ?
+			<BrowserEditor
+				uploadedFile={uploadedFile}
+				mainContent={ref.current}
+				settings={{csrfToken, baseUrl, selectFile, labels: uploadedFile.labels}}
+			/> : <>
+			<MenuBar
 				lastFolderId={structure.last_folder}
 				fetchFiles={fetchFiles}
 				openUploader={() => uploaderRef.current.openUploader()}
 			/>
 			<div className="browser-body">
 				<nav className="folder-structure">
-					<ul>
-						<FolderStructure
+					<ul role="navigation">
+						{structure.root_folder && <FolderStructure
 							baseUrl={baseUrl}
 							folder={structure.root_folder}
 							lastFolderId={structure.last_folder}
 							fetchFiles={fetchFiles}
 							refreshStructure={refreshStructure}
-						/>
+						/>}
 					</ul>
 				</nav>
-				{uploadedFile ?
-				<BrowserEditor uploadedFile={uploadedFile} mainContent={ref.current} /> :
 				<FileUploader
 					folderId={structure.last_folder}
 					handleUpload={handleUpload}
@@ -144,8 +163,9 @@ export default function FileSelectDialog(props) {
 					structure.files === null ?
 					<div className="status">{gettext("Loading files…")}</div> :
 					<FilesList files={structure.files} selectFile={selectFile} />
-				}</FileUploader>}
+				}</FileUploader>
 			</div>
+			</>}
 		</div>
 		<Tooltip id="django-finder-tooltip" place="bottom-start" />
 	</>);

client/browser/FinderFileSelect.tsx

@@ -49,6 +49,7 @@ export default function FinderFileSelect(props) {
 
 	function closeDialog() {
 		dialogRef.current.close();
+		dialogRef.current.dispatchEvent(new CustomEvent('close'));
 	}
 
 	function deleteFile() {
@@ -99,9 +100,9 @@ export default function FinderFileSelect(props) {
 		</div>
 		<dialog ref={dialogRef}>
 			<FileSelectDialog
+				realm={props.realm}
 				baseUrl={baseUrl}
 				csrfToken={csrfToken}
-				realm={props.realm}
 				selectFile={selectFile}
 			/>
 			<div