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]>

Author: 3 people

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>

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>

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

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>

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} />
 							)}
 						</>
 					) : (

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>

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>

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
 						<>

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>

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,