JanssenProject · moabu · Apr 12, 2025 · Apr 9, 2025 · Apr 9, 2025 · Apr 10, 2025
@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { useSnackbar } from '@mui/base/useSnackbar';
+import { ClickAwayListener } from '@mui/base/ClickAwayListener';
+import { css, keyframes, styled } from '@mui/system';
+
+export default function UseSnackbar({isSnackbarOpen, handleSnackbar, message}) {
+  const [open, setOpen] = React.useState(isSnackbarOpen);
+
+  React.useEffect(() => {
+    if (isSnackbarOpen) {
+      handleOpen();
+    } else {
+      handleClose();
+    }
+  }, [isSnackbarOpen]);
+
+  const handleClose = () => {
+    setOpen(false);
+    handleSnackbar(false);
+  };
+
+  const { getRootProps, onClickAway } = useSnackbar({
+    onClose: handleClose,
+    open,
+    autoHideDuration: 1000,
+  });
+
+  const handleOpen = () => {
+    setOpen(true);
+    handleSnackbar(true);
+  };
+
+  return (
+    <React.Fragment>
+      {open ? (
+        <ClickAwayListener >
+          <CustomSnackbar {...getRootProps()}>{message}</CustomSnackbar>
+        </ClickAwayListener>
+      ) : null}
+    </React.Fragment>
+  );
+}
+
+const blue = {
+  50: '#F0F7FF',
+  100: '#C2E0FF',
+  200: '#99CCF3',
+  300: '#66B2FF',
+  400: '#3399FF',
+  500: '#007FFF',
+  600: '#0072E5',
+  700: '#0059B2',
+  800: '#004C99',
+  900: '#003A75',
+};
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
+};
+
+const snackbarInRight = keyframes`
+  from {
+    transform: translateX(100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+`;
+
+const CustomSnackbar = styled('div')(
+  ({ theme }) => css`
+    position: fixed;
+    z-index: 5500;
+    display: flex;
+    right: 16px;
+    bottom: 16px;
+    left: auto;
+    justify-content: start;
+    max-width: 560px;
+    min-width: 300px;
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+    border-radius: 8px;
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    box-shadow: ${theme.palette.mode === 'dark'
+      ? `0 4px 8px rgb(0 0 0 / 0.7)`
+      : `0 4px 8px rgb(0 0 0 / 0.1)`};
+    padding: 0.75rem;
+    color: ${theme.palette.mode === 'dark' ? blue[200] : blue[700]};
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: 500;
+    animation: ${snackbarInRight} 200ms;
+    transition: transform 0.2s ease-out;
+  `,
+);
@@ -17,13 +17,23 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import { JsonEditor } from 'json-edit-react';
 import axios from 'axios';
 import Utils from './Utils';
-
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import { pink } from '@mui/material/colors';
+import cedarlingBootstrapJson from './cedarlingBootstrap.json';
+import Chip from '@mui/material/Chip';
+import ViewListIcon from '@mui/icons-material/ViewList';
+import UseSnackbar from './UseSnackbar';
 export default function AddCedarlingConfig({ isOpen, handleDialog, newData }) {
   const [open, setOpen] = React.useState(isOpen);
   const [bootstrap, setBootstrap] = React.useState(newData);
   const [errorMessage, setErrorMessage] = React.useState("")
   const [loading, setLoading] = React.useState(false);
   const [inputSelection, setInputSelection] = React.useState("json");
+  const [showConfiguration, setShowConfiguration] = React.useState(false);
+  const [showConfigurationButton, setShowConfigurationButton] = React.useState(true);
+  const [snackbar, setSnackbar] = React.useState({ open: false, message: '' });
 
   const ADD_BOOTSTRAP_ERROR = 'Error in adding bootstrap. Check web console for logs.'
 
@@ -36,7 +46,15 @@ export default function AddCedarlingConfig({ isOpen, handleDialog, newData }) {
   }, [isOpen]);
 
   React.useEffect(() => {
-    setBootstrap(newData)
+    if (Utils.isEmpty(newData) || Object.keys(newData).length === 0) {
+      setBootstrap({});
+      setShowConfiguration(true);
+      setShowConfigurationButton(true);
+    } else {
+      setBootstrap(newData);
+      setShowConfiguration(false);
+      setShowConfigurationButton(false);
+    }
   }, [newData]);
 
   const handleClose = () => {
@@ -52,6 +70,16 @@ export default function AddCedarlingConfig({ isOpen, handleDialog, newData }) {
     setOpen(true);
   };
 
+  const copyToClipboard = () => {
+    try {
+      const jsonString = JSON.stringify(bootstrap, null, 2); // pretty print
+      navigator.clipboard.writeText(jsonString);
+      setSnackbar({ open: true, message: 'JSON copied to clipboard!' });
+    } catch (error) {
+      setSnackbar({ open: true, message: 'Copy failed: ' + error.message });
+    }
+  };
+
   const validateBootstrap = async (e) => {
     let bootstrap = e.target.value;
     setErrorMessage('');
@@ -118,6 +146,7 @@ export default function AddCedarlingConfig({ isOpen, handleDialog, newData }) {
 
   return (
     <React.Fragment>
+      <UseSnackbar isSnackbarOpen={snackbar.open} handleSnackbar={(open) => setSnackbar({ ...snackbar, open })} message={snackbar.message}/>
       <Dialog
         open={open}
         >
@@ -153,24 +182,55 @@ export default function AddCedarlingConfig({ isOpen, handleDialog, newData }) {
             {(!!errorMessage || errorMessage !== '') ?
               <Alert severity="error">{errorMessage}</Alert> : ''
             }
-            <RadioGroup
-              row
-              aria-labelledby="demo-row-radio-buttons-group-label"
-              name="row-radio-buttons-group"
-              defaultValue="json"
-            >
-              <FormControlLabel value="json" control={<Radio  => { setErrorMessage(''); setInputSelection("json"); }} color="success" />} label="JSON" />
-              <FormControlLabel value="url" control={<Radio  => { setErrorMessage(''); setInputSelection("url") }} />} label="URL" />
-            </RadioGroup>
-            {inputSelection === 'json' ?
-              <JsonEditor
-                data={bootstrap}
-                setData={setBootstrap}
-                rootName="bootstrapConfig"
-              />
-              : ''}
-            {inputSelection === 'url' ?
-              <TextField
+            <div style={{ display: 'flex', justifyContent: 'space-between', minWidth: '250px', maxWidth: 'min(600px, 90vw)' }}>
+              <RadioGroup
+                row
+                aria-labelledby="demo-row-radio-buttons-group-label"
+                name="row-radio-buttons-group"
+                defaultValue="json"
+              >
+                <FormControlLabel value="json" control={<Radio  => { setErrorMessage(''); setInputSelection("json"); }} color="success" />} label="JSON" />
+                <FormControlLabel value="url" control={<Radio  => { setErrorMessage(''); setInputSelection("url") }} />} label="URL" />
+              </RadioGroup>
+
+              {inputSelection === 'json' &&
+                (<Tooltip title="Copy JSON configuration">
+                  <IconButton aria-label="Copy" style={{ maxWidth: '5vmax', float: 'right' }} >
+                    <ContentCopyIcon sx={{ color: pink[500] }} />
+                  </IconButton>
+                </Tooltip>)}
+            </div>
+
+            {inputSelection === 'json' &&
+              (
+                <>
+                {showConfigurationButton && (
+                <div style={{maxWidth: '50vmax'}}>
+                  <Chip icon={<ViewListIcon />}
+                    label={showConfiguration ? "Show Minimal Configuration" : "Remove Minimal Configuration"}
+                    variant="outlined"
+                     => {
+                      if (showConfiguration) {
+                        setBootstrap(cedarlingBootstrapJson);
+                        setShowConfiguration(false);
+                      } else {
+                        setBootstrap({});
+                        setShowConfiguration(true);
+                      }
+                    }
+                    }
+                  />
+                  </div>)}
+                  <JsonEditor
+                    data={bootstrap}
+                    setData={setBootstrap}
+                    rootName="bootstrapConfig"
+                    icons={{ copy: <ContentCopyIcon /> }}
+                  />
+                </>
+              )}
+            {inputSelection === 'url' &&
+              (<TextField
                 error={errorMessage.length !== 0}
                 autoFocus
                 required
@@ -185,7 +245,7 @@ export default function AddCedarlingConfig({ isOpen, handleDialog, newData }) {
                  => {
                   validateBootstrap(e);
                 }}
-              /> : ''}
+              />)}
           </Stack>
         </DialogContent>
         <DialogActions>
@@ -195,4 +255,4 @@ export default function AddCedarlingConfig({ isOpen, handleDialog, newData }) {
       </Dialog>
     </React.Fragment>
   );
-}
+}