clear more breakpoints and move role to the Details (#968)

* clear more breakpoints and move role to the Details * bump version up * add version to public layout too * update changelog * package json version * Pre commit autoformat (#846) * Removed unused imports using autoflake. * Ordered imports using isort. * Reformatted using black. * Setting up pre-commits. * Ran pre-commit an all files. * Working on creating openapi.json without running backend to be used with codegen. * Fixed `MUI: The Tabs component doesn't accept a Fragment as a child.` * Fixed runtime error due to replacing `== None` with 'is None'. * Fixed runtime error due to replacing `== None` with 'is None'. * Automatically generate openapi json file using pre-commit hook. * Added codegen precommit hook. * Setting up prettier and eslint. * First run of prettier. * Runnin eslint and prettier as hooks. * Skip codegen directories when running eslint and prettier. * Flake8 E711 exception. Required for Beanie query to work. * Fixed search_users_prefix codegen stub. * Fixed beanie query for get_dataset_folders. * Ignore Flake8 E711 since beanie query do not support `is None`. * bump keycloak chart version to 13 so it's using keycloak appversion 20 * update chart lock * add login to github repo * push set to true * revert login to github repo * version updates * revert * no v in the appVersion * change to make keycloak point to external url (#942) * 929 message on empty page if there is no datasets (#930) * basic message, need to improve * adding a login or register button * removing buttons * links to login or register if no public datasets * changing text * srink the version and align to left (#950) * moved key to grid instead of card * adding admin mode to the authwrapper (#951) * Fixed dataset parameters. They weren't being included in rabbtimq message. (#957) * fix extractor bugs and deployment script bug (#958) * Use --host 0.0.0.0 when running uvicorn to make backend listen on host IP. * fix missing add metadata button on dataset pycharm was complaining about missing publicView boolean in DisplayMetadata * Drag and Drop One or More Files (#935) * initial commit, add dependency, new class will eventually combine all file uploads * working on adding upload drag and drop * page does not load * drag and drop does not actually work * addign fileinputdrop as independent component * add fileupload drop inside uploadfiledraganddrop * drag and drop does not add files select selects files but misses the first one * drag and drop works now, is overwritten if file selected using button, need to fix * uploads but overwrites, need to fix * works for the select, need to fix other * should work for drop now too * was not an array * delete icon works removing console logs * drag and drop and select means other upload methods no longer needed * removing text in drag and drop * added to styles but not using because it does not work * some changes, not sure how to do rest * fix button * return to dataset * remove unnecessary imports --------- Co-authored-by: Chen Wang <[email protected]> * precommits --------- Co-authored-by: Luigi Marini <[email protected]> Co-authored-by: Todd Nicholson <[email protected]> Co-authored-by: toddn <[email protected]>
clowder-framework · Mar 22, 2024 · cc0bd83 · cc0bd83
1 parent 980cafb
commit cc0bd83
Show file tree

Hide file tree

Showing 12 changed files with 61 additions and 58 deletions.
diff --git a/frontend/src/components/datasets/Dataset.tsx b/frontend/src/components/datasets/Dataset.tsx
@@ -44,7 +44,6 @@ import ShareIcon from "@mui/icons-material/Share";
 import BuildIcon from "@mui/icons-material/Build";
 import { ExtractionHistoryTab } from "../listeners/ExtractionHistoryTab";
 import { SharingTab } from "../sharing/SharingTab";
-import RoleChip from "../auth/RoleChip";
 import { TabStyle } from "../../styles/Styles";
 import { ErrorModal } from "../errors/ErrorModal";
 import { Visualization } from "../visualizations/Visualization";
@@ -231,7 +230,9 @@ export const Dataset = (): JSX.Element => {
 							</Typography>
 						</Box>
 						<Box>
-							<RoleChip role={datasetRole.role} />
+							<Typography variant="body1" paragraph>
+								{about["description"]}
+							</Typography>
 						</Box>
 					</Stack>
 				</Grid>
@@ -246,10 +247,7 @@ export const Dataset = (): JSX.Element => {
 				{/*actions*/}
 			</Grid>
 			<Grid container spacing={2} sx={{ mt: 2 }}>
-				<Grid item xs={10}>
-					<Typography variant="body1" paragraph>
-						{about["description"]}
-					</Typography>
+				<Grid item xs={12} sm={12} md={10} lg={10} xl={10}>
 					<Tabs
 						value={selectedTabIndex}
 						onChange={handleTabChange}
@@ -429,8 +427,8 @@ export const Dataset = (): JSX.Element => {
 						<></>
 					)}
 				</Grid>
-				<Grid item>
-					<DatasetDetails details={about} />
+				<Grid item xs={12} sm={12} md={2} lg={2} xl={2}>
+					<DatasetDetails details={about} myRole={datasetRole.role} />
 				</Grid>
 			</Grid>
 		</Layout>

diff --git a/frontend/src/components/datasets/DatasetDetails.tsx b/frontend/src/components/datasets/DatasetDetails.tsx
@@ -5,12 +5,13 @@ import { StackedList } from "../util/StackedList";
 import { Dataset } from "../../types/data";
 
 type DatasetAboutProps = {
+	myRole?: string;
 	details: Dataset;
 };
 
 export function DatasetDetails(props: DatasetAboutProps) {
-	const { id, created, modified, creator, status, views, downloads } =
-		props.details;
+	const { myRole } = props;
+	const { id, created, modified, creator, status, downloads } = props.details;
 
 	const details = new Map<string, string>();
 	details.set("Owner", `${creator.first_name} ${creator.last_name}`);
@@ -20,6 +21,8 @@ export function DatasetDetails(props: DatasetAboutProps) {
 	details.set("Dataset id", id);
 	details.set("Downloads", downloads);
 
+	if (myRole) details.set("My Role", myRole ? myRole.toUpperCase() : "");
+
 	return (
 		<Box sx={{ mt: 5 }}>
 			<Typography variant="h5" gutterBottom>

diff --git a/frontend/src/components/datasets/NewMenu.tsx b/frontend/src/components/datasets/NewMenu.tsx
@@ -14,7 +14,7 @@ import { useSelector } from "react-redux";
 import { RootState } from "../../types/data";
 import { UploadFile } from "../files/UploadFile";
 import { UploadFileMultiple } from "../files/UploadFileMultiple";
-import {UploadFileDragAndDrop} from "../files/UploadFileDragAndDrop";
+import { UploadFileDragAndDrop } from "../files/UploadFileDragAndDrop";
 import UploadIcon from "@mui/icons-material/Upload";
 import { Folder } from "@material-ui/icons";
 
@@ -30,8 +30,7 @@ export const NewMenu = (props: ActionsMenuProps): JSX.Element => {
 	const about = useSelector((state: RootState) => state.dataset.about);
 
 	const [anchorEl, setAnchorEl] = React.useState<Element | null>(null);
-	const [dragDropFiles, setDragDropFiles] =
-		React.useState<boolean>(false);
+	const [dragDropFiles, setDragDropFiles] = React.useState<boolean>(false);
 	const [newFolder, setNewFolder] = React.useState<boolean>(false);
 
 	const handleCloseNewFolder = () => {
@@ -55,7 +54,10 @@ export const NewMenu = (props: ActionsMenuProps): JSX.Element => {
 				maxWidth="lg"
 				aria-labelledby="form-dialog"
 			>
-				<UploadFileDragAndDrop selectedDatasetId={datasetId} folderId={folderId}/>
+				<UploadFileDragAndDrop
+					selectedDatasetId={datasetId}
+					folderId={folderId}
+				/>
 			</Dialog>
 
 			<CreateFolder

diff --git a/frontend/src/components/datasets/PublicDataset.tsx b/frontend/src/components/datasets/PublicDataset.tsx
@@ -167,7 +167,11 @@ export const PublicDataset = (): JSX.Element => {
 								{about["name"]}
 							</Typography>
 						</Box>
-						<Box>{/*<RoleChip role={datasetRole.role} />*/}</Box>
+						<Box>
+							<Typography variant="body1" paragraph>
+								{about["description"]}
+							</Typography>
+						</Box>
 					</Stack>
 				</Grid>
 				{/*actions*/}
@@ -177,10 +181,7 @@ export const PublicDataset = (): JSX.Element => {
 				{/*actions*/}
 			</Grid>
 			<Grid container spacing={2} sx={{ mt: 2 }}>
-				<Grid item xs={10}>
-					<Typography variant="body1" paragraph>
-						{about["description"]}
-					</Typography>
+				<Grid item xs={12} sm={12} md={10} lg={10} xl={10}>
 					<Tabs
 						value={selectedTabIndex}
 						onChange={handleTabChange}
@@ -268,7 +269,7 @@ export const PublicDataset = (): JSX.Element => {
 						<Listeners datasetId={datasetId} />
 					</TabPanel>
 				</Grid>
-				<Grid item>
+				<Grid item xs={12} sm={12} md={2} lg={2} xl={2}>
 					<DatasetDetails details={about} />
 				</Grid>
 			</Grid>

diff --git a/frontend/src/components/files/File.tsx b/frontend/src/components/files/File.tsx
@@ -47,7 +47,6 @@ import { Visualization } from "../visualizations/Visualization";
 import { ErrorModal } from "../errors/ErrorModal";
 import { FileHistory } from "./FileHistory";
 import { VersionChip } from "../versions/VersionChip";
-import RoleChip from "../auth/RoleChip";
 import Typography from "@mui/material/Typography";
 import { ClowderSelect } from "../styledComponents/ClowderSelect";
 
@@ -299,7 +298,6 @@ export const File = (): JSX.Element => {
 						) : (
 							<></>
 						)}
-						<RoleChip role={fileRole} />
 					</Grid>
 				</Grid>
 				<Grid item xs={2} sx={{ display: "flex-top", alignItems: "center" }}>
@@ -311,7 +309,7 @@ export const File = (): JSX.Element => {
 				</Grid>
 			</Grid>
 			<Grid container spacing={2}>
-				<Grid item xs={10}>
+				<Grid item xs={12} sm={12} md={10} lg={10} xl={10}>
 					<Tabs
 						value={selectedTabIndex}
 						onChange={handleTabChange}
@@ -449,12 +447,12 @@ export const File = (): JSX.Element => {
 						)}
 					</TabPanel>
 				</Grid>
-				<Grid item xs={2}>
+				<Grid item xs={12} sm={12} md={2} lg={2} xl={2}>
 					{latestVersionNum == selectedVersionNum ? (
 						// latest version
 						<>
 							{Object.keys(fileSummary).length > 0 && (
-								<FileDetails fileSummary={fileSummary} />
+								<FileDetails fileSummary={fileSummary} myRole={fileRole} />
 							)}
 						</>
 					) : (

diff --git a/frontend/src/components/files/FileDetails.tsx b/frontend/src/components/files/FileDetails.tsx
@@ -7,21 +7,20 @@ import { StackedList } from "../util/StackedList";
 
 type FileAboutProps = {
 	fileSummary: FileOut;
+	myRole?: string;
 };
 
 export function FileDetails(props: FileAboutProps) {
+	const { myRole } = props;
 	const {
 		id,
 		created,
 		name,
 		creator,
-		version_id,
 		bytes,
 		content_type,
-		views,
 		downloads,
 		storage_type,
-		storage_path,
 	} = props.fileSummary;
 
 	const details = new Map<string, string>();
@@ -30,6 +29,7 @@ export function FileDetails(props: FileAboutProps) {
 	details.set("Updated on", parseDate(created));
 	details.set("Uploaded as", name);
 	details.set("Uploaded by", `${creator.first_name} ${creator.last_name}`);
+
 	switch (storage_type) {
 		case "minio": {
 			details.set("Storage location", "Database");
@@ -51,6 +51,8 @@ export function FileDetails(props: FileAboutProps) {
 	details.set("File id", id);
 	details.set("Downloads", downloads);
 
+	if (myRole) details.set("My Role", myRole ? myRole.toUpperCase() : "");
+
 	return (
 		<Box sx={{ mt: 5, mb: 2 }}>
 			<Typography variant="h5" gutterBottom>

diff --git a/frontend/src/components/files/FileUploadDrop.tsx b/frontend/src/components/files/FileUploadDrop.tsx
@@ -98,7 +98,7 @@ export default function FileUploadDrop(props: FileUploadDropProps) {
 						multiple
 					/>
 					<Typography className={classes.fileDropText}>
-						<br></br>
+						<br />
 					</Typography>
 				</div>
 			</FileDrop>

diff --git a/frontend/src/components/files/PublicFile.tsx b/frontend/src/components/files/PublicFile.tsx
@@ -231,7 +231,7 @@ export const PublicFile = (): JSX.Element => {
 				</Grid>
 			</Grid>
 			<Grid container spacing={2}>
-				<Grid item xs={10}>
+				<Grid item xs={12} sm={12} md={10} lg={10} xl={10}>
 					<Tabs
 						value={selectedTabIndex}
 						onChange={handleTabChange}
@@ -314,7 +314,7 @@ export const PublicFile = (): JSX.Element => {
 					{/*	<Listeners fileId={fileId} datasetId={datasetId} />*/}
 					{/*</TabPanel>*/}
 				</Grid>
-				<Grid item xs={2}>
+				<Grid item xs={12} sm={12} md={2} lg={2} xl={2}>
 					{latestVersionNum == selectedVersionNum ? (
 						// latest version
 						<>

diff --git a/frontend/src/components/files/UploadFileDragAndDrop.tsx b/frontend/src/components/files/UploadFileDragAndDrop.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useRef, useState} from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 import {
 	Box,
@@ -35,7 +35,7 @@ type UploadFileDragAndDropProps = {
 export const UploadFileDragAndDrop: React.FC<UploadFileDragAndDropProps> = (
 	props: UploadFileDragAndDropProps
 ) => {
-	const { selectedDatasetId, folderId} = props;
+	const { selectedDatasetId, folderId } = props;
 	const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
 	const [metadataRequestForms, setMetadataRequestForms] = useState({});
 	const [allFilled, setAllFilled] = React.useState<boolean>(false);
@@ -87,22 +87,22 @@ export const UploadFileDragAndDrop: React.FC<UploadFileDragAndDropProps> = (
 	};
 
 	const onFileInputChange = (event) => {
-		const fileList : File[] = Array.from(event.target.files);
-		let newArray = selectedFiles.slice();
-		fileList.forEach(f => newArray.push(f));
+		const fileList: File[] = Array.from(event.target.files);
+		const newArray = selectedFiles.slice();
+		fileList.forEach((f) => newArray.push(f));
 		setSelectedFiles(newArray);
 	};
 
 	const onDrop = (fileList) => {
-		let newFileList : File[] = Array.from(fileList);
-		let newArray = selectedFiles.slice();
-		newFileList.forEach(f => newArray.push(f));
+		const newFileList: File[] = Array.from(fileList);
+		const newArray = selectedFiles.slice();
+		newFileList.forEach((f) => newArray.push(f));
 		setSelectedFiles(newArray);
 	};
 
 	const onDeleteClick = (element) => {
-		let newFileList : File[] = selectedFiles;
-		let newArray = newFileList.slice();
+		const newFileList: File[] = selectedFiles;
+		const newArray = newFileList.slice();
 		newArray.pop(element);
 		setSelectedFiles(newArray);
 	};
@@ -204,7 +204,7 @@ export const UploadFileDragAndDrop: React.FC<UploadFileDragAndDropProps> = (
 										Next
 									</Button>
 								</Grid>
-								<Grid xs={1}></Grid>
+								<Grid xs={1} />
 							</Grid>
 						</StepContent>
 					</Step>

diff --git a/frontend/src/reducers/file.ts b/frontend/src/reducers/file.ts
@@ -1,4 +1,5 @@
 import {
+	CHANGE_SELECTED_VERSION,
 	DOWNLOAD_FILE,
 	RECEIVE_FILE_EXTRACTED_METADATA,
 	RECEIVE_FILE_METADATA_JSONLD,
@@ -7,11 +8,10 @@ import {
 	RECEIVE_PREVIEWS,
 	RECEIVE_VERSIONS,
 	RESET_FILE_PRESIGNED_URL,
-	CHANGE_SELECTED_VERSION,
 } from "../actions/file";
 import { DataAction } from "../types/action";
 import { FileState } from "../types/data";
-import { AuthorizationBase, FileOut as FileSummary } from "../openapi/v2";
+import { FileOut as FileSummary } from "../openapi/v2";
 import { RECEIVE_FILE_ROLE } from "../actions/authorization";
 
 const defaultState: FileState = {
@@ -20,7 +20,7 @@ const defaultState: FileState = {
 	metadataJsonld: [],
 	previews: [],
 	fileVersions: [],
-	fileRole: <AuthorizationBase>{},
+	fileRole: "",
 	blob: new Blob([]),
 	presignedUrl: "",
 	selected_version_num: 1,

diff --git a/frontend/src/styles/Styles.tsx b/frontend/src/styles/Styles.tsx
@@ -16,7 +16,7 @@ export const FileDropStyle = {
 };
 
 export const FileDropInput = {
-	width: "95px"
+	width: "95px",
 };
 
 export const FileDropText = {
@@ -27,7 +27,7 @@ export const FileDropText = {
 	fontWeight: 500,
 	letterSpacing: 0,
 	lineHeight: "18px",
-	textAlign: "center"
+	textAlign: "center",
 };
 export const FileDropGroup = {
 	width: "92px",
@@ -41,11 +41,11 @@ export const DisplayFile = {
 	border: "1px solid #00619D",
 	backgroundColor: "#FFFFFF",
 	margin: "5px auto 0 auto",
-	display: "block"
+	display: "block",
 };
 export const DisplayFileItem = {
 	width: "100%",
-	height: "37px"
+	height: "37px",
 };
 
 export const DisplayFilename = {
@@ -56,14 +56,14 @@ export const DisplayFilename = {
 	letterSpacing: 0,
 	lineHeight: "18px",
 	padding: "9px 17px",
-	float: "left"
+	float: "left",
 };
 export const DeleteFileIcon = {
-	"height": "24px",
-	"width": "24px",
-	"float": "right",
-	"margin": "6px",
+	height: "24px",
+	width: "24px",
+	float: "right",
+	margin: "6px",
 	"&:hover": {
-		color: "#D63649"
-	}
+		color: "#D63649",
+	},
 };
diff --git a/frontend/src/types/data.ts b/frontend/src/types/data.ts
@@ -172,14 +172,13 @@ export interface MetadataState {
 }
 
 export interface FileState {
-	url: string;
 	blob: Blob;
 	fileSummary: FileOut;
 	extractedMetadata: ExtractedMetadata[];
 	metadataJsonld: MetadataJsonld[];
 	previews: FilePreview[];
 	fileVersions: FileVersion[];
-	fileRole: AuthorizationBase;
+	fileRole: string;
 	presignedUrl: string;
 	selected_version_num: number;
 }