message on new metadata entry (#764)

* sort of works with snackbar, needs some work * wrong place need to fix colors * customize the snackbar * snackbar disappers too quickly * adding a TODO think it is the proper fix for this * moving snackbar to other page, now it does not disappear --------- Co-authored-by: Chen Wang <[email protected]> Co-authored-by: Max Burnette <[email protected]>
clowder-framework · Nov 10, 2023 · 20a615b · 20a615b
1 parent 881ec0f
commit 20a615b
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 3 deletions.
diff --git a/frontend/src/components/metadata/CreateMetadataDefinition.tsx b/frontend/src/components/metadata/CreateMetadataDefinition.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useState} from "react";
 
 import {
 	Autocomplete,
@@ -14,6 +14,7 @@ import {
 	StepContent,
 	StepLabel,
 	Stepper,
+	Snackbar,
 } from "@mui/material";
 import { useDispatch } from "react-redux";
 import AddBoxIcon from "@mui/icons-material/AddBox";
@@ -29,18 +30,21 @@ interface SupportedInputs {
 
 type CreateMetadataDefinitionProps = {
 	setCreateMetadataDefinitionOpen: any;
+	setSnackBarOpen: any;
+	setSnackBarMessage: any;
 };
 
 export const CreateMetadataDefinition = (
 	props: CreateMetadataDefinitionProps
 ) => {
-	const { setCreateMetadataDefinitionOpen } = props;
+	const { setCreateMetadataDefinitionOpen, setSnackBarOpen, setSnackBarMessage } = props;
 
 	const dispatch = useDispatch();
 	// @ts-ignore
 	const saveMetadataDefinitions = (metadata: object) =>
 		dispatch(postMetadataDefinitions(metadata));
 
+
 	const [activeStep, setActiveStep] = React.useState(0);
 	const [parsedInput, setParsedInput] = React.useState("");
 	const [contextMap, setContextMap] = React.useState([{ term: "", iri: "" }]);
@@ -288,6 +292,9 @@ export const CreateMetadataDefinition = (
 		});
 
 		setContextMap([{ term: "", iri: "" }]);
+		// TODO add snackbar here
+		setSnackBarMessage("Successfully added metadata definition");
+		setSnackBarOpen(true);
 	};
 
 	const handleNext = () => {

diff --git a/frontend/src/components/metadata/MetadataDefinitions.tsx b/frontend/src/components/metadata/MetadataDefinitions.tsx
@@ -8,6 +8,7 @@ import {
 	DialogTitle,
 	Grid,
 	IconButton,
+	InputBase, Snackbar,
 } from "@mui/material";
 import { RootState } from "../../types/data";
 import { useDispatch, useSelector } from "react-redux";
@@ -65,6 +66,18 @@ export function MetadataDefinitions() {
 	const [selectedMetadataDefinition, setSelectedMetadataDefinition] =
 		useState();
 
+		// snack bar
+	const [snackBarOpen, setSnackBarOpen] = useState(false);
+	const [snackBarMessage, setSnackBarMessage] = useState("");
+
+	// for breadcrumb
+	const paths = [
+		{
+			name: "Metadata Definitions",
+			url: "/metadata-definitions",
+		},
+	];
+
 	// component did mount
 	useEffect(() => {
 		listMetadataDefinitions(null, skip, limit);
@@ -110,7 +123,16 @@ export function MetadataDefinitions() {
 		<Layout>
 			{/*Error Message dialogue*/}
 			<ErrorModal errorOpen={errorOpen} setErrorOpen={setErrorOpen} />
-
+			{/*TODO PUT SNACKBAR HERE FROM OTHER COMPONENT*/}
+			<Snackbar
+				open={snackBarOpen}
+				autoHideDuration={6000}
+				onClose={() => {
+					setSnackBarOpen(false);
+					setSnackBarMessage("");
+				}}
+				message={snackBarMessage}
+			/>
 			{/*Delete metadata definition modal*/}
 			<DeleteMetadataDefinitionModal
 				deleteMetadataDefinitionConfirmOpen={
@@ -136,6 +158,8 @@ export function MetadataDefinitions() {
 				<DialogContent>
 					<CreateMetadataDefinition
 						setCreateMetadataDefinitionOpen={setCreateMetadataDefinitionOpen}
+						setSnackBarOpen={setSnackBarOpen}
+						setSnackBarMessage={setSnackBarMessage}
 					/>
 				</DialogContent>
 			</Dialog>

diff --git a/frontend/src/components/styledComponents/ClowderSnackBar.jsx b/frontend/src/components/styledComponents/ClowderSnackBar.jsx
@@ -0,0 +1,10 @@
+import React from "react";
+import Snackbar from "@mui/material/Snackbar";
+import { styled } from "@mui/system";
+
+export const ClowderSnackBar = styled(Snackbar)(({ theme }) => ({
+	"& .MuiSnackbarContent-root": {
+		backgroundColor: "#FFFFFF", // Set your desired background color
+		color: theme.palette.primary.main, // Set your desired font color
+	},
+}));