1086 file UI component flag current files in datasets (#1103)

* Createda testing space and initial setup, need to figure fetch

* Using a new filestructure system

* Fetching folers from files also

* File selector MVP complete

* Cleaned out the UI and code

* Extractor now has capability to use Fileselector widget

* Cleanup

* linting change

* Option to only show files in dataset folder

* Removing console log

Author: Vismayak

frontend/src/components/listeners/SubmitExtraction.tsx

@@ -44,15 +44,13 @@ const widgets = {
 	clowderFile: ClowderFileSelector,
 };
 
-const uiSchema = {
-	clowderFile: { "ui:widget": "FileSelector" },
-};
-
 export default function SubmitExtraction(props: SubmitExtractionProps) {
 	const { fileId, datasetId, open, infoOnly, handleClose, selectedExtractor } =
 		props;
 	const dispatch = useDispatch();
 
+	const uiSchema: any = {};
+
 	const submitFileExtraction = (
 		fileId: string | undefined,
 		extractorName: string | undefined,
@@ -80,6 +78,27 @@ export default function SubmitExtraction(props: SubmitExtractionProps) {
 		}
 	};
 
+	// The for loop is used to pass the datasetId to a widget if it is a clowderFile Widget
+	if (
+		selectedExtractor &&
+		selectedExtractor["properties"] &&
+		selectedExtractor["properties"]["parameters"] &&
+		selectedExtractor["properties"]["parameters"]["schema"]
+	) {
+		const parameters = selectedExtractor["properties"]["parameters"]["schema"];
+		for (const key in parameters) {
+			// Check if field "format" present and equals "clowderFile"
+			if (parameters[key].format && parameters[key].format === "clowderFile") {
+				uiSchema[key] = {
+					"ui:widget": "clowderFile",
+					"ui:options": {
+						datasetId: datasetId,
+					},
+				};
+			}
+		}
+	}
+
 	const [activeStep, setActiveStep] = useState(0);
 	const handleNext = () => {
 		setActiveStep((prevActiveStep) => prevActiveStep + 1);
@@ -138,6 +157,7 @@ export default function SubmitExtraction(props: SubmitExtractionProps) {
 											<Container>
 												<Form
 													widgets={widgets}
+													uiSchema={uiSchema}
 													schema={{
 														properties: selectedExtractor["properties"][
 															"parameters"

frontend/src/components/navigation/FileSelector.tsx

@@ -47,6 +47,41 @@ interface FSItem {
 	content_type?: string;
 }
 
+// Function to fetch children of a folder
+async function fetchFolderFiles(
+	datasetid: string,
+	folderId: string | undefined
+) {
+	try {
+		const response =
+			await V2.DatasetsService.getDatasetFoldersAndFilesApiV2DatasetsDatasetIdFoldersAndFilesGet(
+				datasetid,
+				folderId,
+				// TODO: Remove hardcoded values
+				0,
+				3000
+			);
+		const data = response.data;
+		const FSItems: FSItem[] =
+			data !== undefined
+				? data.map((FSItem: any) => ({
+						datasetId: datasetid,
+						id: FSItem.id,
+						label: FSItem.name,
+						children: FSItem.object_type === "folder" ? [] : undefined,
+						type: FSItem.object_type,
+						content_type:
+							FSItem.object_type !== "folder"
+								? FSItem.content_type.main_type
+								: undefined,
+				  }))
+				: [];
+		return FSItems;
+	} catch (error) {
+		console.error("Error fetching folders and files", error);
+	}
+}
+
 const RecursiveComponent: React.FC<RecursiveComponentProps> = ({
 	item,
 	depth = 0,
@@ -77,41 +112,6 @@ const RecursiveComponent: React.FC<RecursiveComponentProps> = ({
 		}
 	};
 
-	// Function to fetch children of a folder
-	async function fetchFolderFiles(
-		datasetid: string,
-		folderId: string | undefined
-	) {
-		try {
-			const response =
-				await V2.DatasetsService.getDatasetFoldersAndFilesApiV2DatasetsDatasetIdFoldersAndFilesGet(
-					datasetid,
-					folderId,
-					// TODO: Remove hardcoded values
-					0,
-					3000
-				);
-			const data = response.data;
-			const FSItems: FSItem[] =
-				data !== undefined
-					? data.map((FSItem: any) => ({
-							datasetId: datasetid,
-							id: FSItem.id,
-							label: FSItem.name,
-							children: FSItem.object_type === "folder" ? [] : undefined,
-							type: FSItem.object_type,
-							content_type:
-								FSItem.object_type !== "folder"
-									? FSItem.content_type.main_type
-									: undefined,
-					  }))
-					: [];
-			return FSItems;
-		} catch (error) {
-			console.error("Error fetching folders and files", error);
-		}
-	}
-
 	// Function to handle selection of folder or file
 	const onSelect = () => {
 		if (isFolderOrDataset) {
@@ -232,9 +232,49 @@ const FileSystemViewer: React.FC<{
 	) : null;
 };
 
-const FileSelector: React.FC<{ onChange: (fileId: string) => void }> = ({
-	onChange,
-}) => {
+const DatasetFileViewer: React.FC<{
+	onSelectFile: (fileId: string, fileName: string) => void;
+	datasetId: string;
+}> = ({ onSelectFile, datasetId }) => {
+	const [FSItems, setFSItems] = useState<FSItem[]>([]);
+
+	// Only display contents of the passed dataset
+	useEffect(() => {
+		fetchFolderFiles(datasetId, undefined).then((data) => {
+			setFSItems(data);
+		});
+	}, [datasetId]);
+
+	return FSItems.length > 0 ? (
+		<Box
+			sx={{
+				width: "100%",
+				height: 360,
+				maxWidth: 360,
+				overflowY: "auto",
+				overflowX: "auto",
+				bgcolor: "background.paper",
+			}}
+		>
+			<Typography variant="h6" sx={{ ml: 2, my: 2 }}>
+				File Selector
+			</Typography>
+			{FSItems.map((FSItem) => (
+				<RecursiveComponent
+					key={FSItem.id}
+					item={FSItem}
+					onSelectFile={onSelectFile}
+				/>
+			))}
+		</Box>
+	) : null;
+};
+
+const FileSelector: React.FC<{
+	showOnlyDatasetFiles: boolean;
+	datasetId: string | undefined;
+	onChange: (fileId: string) => void;
+}> = ({ showOnlyDatasetFiles, datasetId, onChange }) => {
 	const [open, setOpen] = useState(false);
 	const [selectedFile, setSelectedFile] = useState<FileDetails>({
 		fileId: "",
@@ -282,7 +322,14 @@ const FileSelector: React.FC<{ onChange: (fileId: string) => void }> = ({
 						p: 4,
 					}}
 				>
-					<FileSystemViewer onSelectFile={handleFileSelect} />
+					{showOnlyDatasetFiles ? (
+						<DatasetFileViewer
+							onSelectFile={handleFileSelect}
+							datasetId={datasetId as string}
+						/>
+					) : (
+						<FileSystemViewer onSelectFile={handleFileSelect} />
+					)}
 				</Box>
 			</Modal>
 		</Box>

frontend/src/components/styledComponents/ClowderFileSelector.jsx

@@ -6,10 +6,16 @@ export const ClowderFileSelector = (item) => {
 	const handleChange = (value) => {
 		item.onChange(value);
 	};
+	const datasetId = item.options.datasetId;
+	const showOnlyDatasetFiles = item.schema.showOnlyDatasetFiles ? true : false;
 	return (
 		<>
 			<ClowderInputLabel>{item.schema.title}</ClowderInputLabel>
-			<FileSelectorButton onChange={handleChange} />
+			<FileSelectorButton
+				showOnlyDatasetFiles={showOnlyDatasetFiles}
+				datasetId={datasetId}
+				onChange={handleChange}
+			/>
 		</>
 	);
 };