Work in progress for upload test button

krdmnbrk · Dec 7, 2024 · 2b140f2 · 2b140f2
1 parent 68c9121
commit 2b140f2
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 22 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -131,10 +131,10 @@ function App() {
   const [darkMode, setDarkMode] = useState(true);
   const [isPortrait, setIsPortrait] = useState(window.innerHeight > window.innerWidth);
   const [changed, setChanged] = useState(false);
-  const [buttonVariant, setButtonVariant] = useState('outlined');
+  const [componentVariant, setComponentVariant] = useState('outlined');
 
   useEffect(() => {
-    setButtonVariant(darkMode ? 'outlined' : 'contained');
+    setComponentVariant(darkMode ? 'outlined' : 'contained');
   }, [darkMode]);
 
   // Prevent page reload
@@ -162,6 +162,13 @@ function App() {
     return () => window.removeEventListener('resize', handleResize);
   }, []);
 
+  useEffect(() => {
+    const cachedTheme = localStorage.getItem('darkMode');
+    if (cachedTheme !== null) {
+      setDarkMode(cachedTheme === 'true');
+    }
+  }, []);
+
   // Check if inputs are updated
   useEffect(() => {
     if (JSON.stringify(inputs) === JSON.stringify(base)) {
@@ -227,7 +234,6 @@ function App() {
         <Grid container spacing={2}>
           <Grid size={isPortrait ? 12 : 6}>
             <Inputs
-              buttonVariant={buttonVariant}
               darkMode={darkMode}
               changed={changed}
               setChanged={setChanged}
@@ -241,7 +247,6 @@ function App() {
           </Grid>
           <Grid size={isPortrait ? 12 : 6}>
             <YamlContent
-              buttonVariant={buttonVariant}
               darkMode={darkMode}
               base={base}
               errors={errors}

diff --git a/src/components/Inputs.jsx b/src/components/Inputs.jsx
@@ -33,7 +33,7 @@ const MenuProps = {
 };
 
 // Functional component for managing inputs
-function Inputs({ darkMode, buttonVariant, changed, setChanged, errors, setErrors, inputs, setInputs, executor_names, supported_platforms }) {
+function Inputs({ darkMode, componentVariant, changed, setChanged, errors, setErrors, inputs, setInputs, executor_names, supported_platforms }) {
 
     // Handle changes to text fields (e.g., Atomic Name, Atomic Description)
     const handleChangeText = (e) => {
@@ -103,7 +103,6 @@ function Inputs({ darkMode, buttonVariant, changed, setChanged, errors, setError
         <Box>
             <Box sx={{ mb: 2 }}>
                 <InputButtons 
-                    buttonVariant={buttonVariant}
                     setInputs={setInputs}
                     setChanged={setChanged}
                     changed={changed}
@@ -248,10 +247,10 @@ function Inputs({ darkMode, buttonVariant, changed, setChanged, errors, setError
             <Box sx={{ mb: 2 }}>
                 <Grid container spacing={2}>
                     <Grid size={6}>
-                        <Dependency buttonVariant={buttonVariant} executor_names={executor_names} errors={errors} setErrors={setErrors} inputs={inputs} setInputs={setInputs} />
+                        <Dependency darkMode={darkMode} executor_names={executor_names} errors={errors} setErrors={setErrors} inputs={inputs} setInputs={setInputs} />
                     </Grid>
                     <Grid size={6}>
-                        <Arguments buttonVariant={buttonVariant} errors={errors} setErrors={setErrors} inputs={inputs} setInputs={setInputs} />
+                        <Arguments darkMode={darkMode} errors={errors} setErrors={setErrors} inputs={inputs} setInputs={setInputs} />
                     </Grid>
                 </Grid>
             </Box>

diff --git a/src/components/Inputs/Arguments.jsx b/src/components/Inputs/Arguments.jsx
@@ -13,7 +13,7 @@ import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
 
 // Arguments component for managing input arguments
-function Arguments({ buttonVariant, errors, setErrors, inputs, setInputs }) {
+function Arguments({ darkMode, errors, setErrors, inputs, setInputs }) {
     // Check if there are duplicate names among the input arguments
     function hasDuplicateNames(data) {
         const names = data.map(obj => obj.name.trim());
@@ -90,7 +90,7 @@ function Arguments({ buttonVariant, errors, setErrors, inputs, setInputs }) {
                 <Button
                     sx={{ mb: 1 }}
                     startIcon={<AddCircleOutlineIcon />}
-                    variant={buttonVariant}
+                    variant={darkMode ? "outlined" : "contained"} 
                     onClick={addInputArgument}
                 >
                     Add Input Argument {inputs.input_arguments.length > 0 ? `(${inputs.input_arguments.length})` : ''}
@@ -99,7 +99,7 @@ function Arguments({ buttonVariant, errors, setErrors, inputs, setInputs }) {
 
             {/* Display Validation Errors */}
             {errors.length > 0 &&
-                <Alert sx={{ mb: 1 }} variant='outlined' severity="error">
+                <Alert sx={{ mb: 1 }} variant={darkMode ? "outlined" : "filled"}  severity="error">
                     {errors.map((error, index) => (
                         <li key={index}>
                             {error}
@@ -178,7 +178,7 @@ function Arguments({ buttonVariant, errors, setErrors, inputs, setInputs }) {
                             aria-label="delete"
                             size="large"
                             color="primary"
-                            variant={buttonVariant}
+                            variant={darkMode ? "outlined" : "contained"} 
                             onClick={() => removeInputArgument(index)}
                         >
                             <DeleteIcon fontSize="inherit" />

diff --git a/src/components/Inputs/Dependency.jsx b/src/components/Inputs/Dependency.jsx
@@ -16,7 +16,7 @@ import InfoIcon from '@mui/icons-material/Info';
 import Editor from '../Editor';
 
 // Dependency component for managing prerequisite commands and dependencies
-function Dependency({ buttonVariant, inputs, setInputs, executor_names }) {
+function Dependency({ darkMode, inputs, setInputs, executor_names }) {
     // State for managing tooltip visibility
     const [tooltipOpen, setTooltipOpen] = useState(false);
 
@@ -85,11 +85,11 @@ function Dependency({ buttonVariant, inputs, setInputs, executor_names }) {
             </Typography>
 
             {/* Button to add a new dependency */}
-            <Box sx={{ mt: 1 }}>
+            <Box sx={{ mt: 1, mb: 1 }}>
                 <Button 
                     startIcon={<AddCircleOutlineIcon />} 
                     sx={{ mr: 2, mb: 1 }} 
-                    variant={buttonVariant} 
+                    variant={darkMode ? "outlined" : "contained"} 
                     onClick={addDependency}
                 >
                     Add Dependency {inputs.dependencies.length > 0 ? `(${inputs.dependencies.length})` : ''}
@@ -182,7 +182,7 @@ function Dependency({ buttonVariant, inputs, setInputs, executor_names }) {
                         <IconButton
                             size='large'
                             color="primary"
-                            variant={buttonVariant}
+                            variant={darkMode ? "outlined" : "contained"} 
                             key={`remove-${index}`}
                             onClick={() => removeDependency(index)}
                         >

diff --git a/src/components/Inputs/InputButtons.jsx b/src/components/Inputs/InputButtons.jsx
@@ -12,10 +12,11 @@ import MenuItem from '@mui/material/MenuItem';
 import MenuList from '@mui/material/MenuList';
 import { basic, moderate, complex } from './SampleTests';
 import { Typography } from '@mui/material';
+import UploadButton from './UploadButton';
 
 
 
-export default function InputButtons({ darkMode, buttonVariant, setInputs, setChanged, changed }) {
+export default function InputButtons({ darkMode, setInputs, setChanged, changed }) {
     const [open, setOpen] = React.useState(false);
     const anchorRef = React.useRef(null);
 
@@ -44,7 +45,7 @@ export default function InputButtons({ darkMode, buttonVariant, setInputs, setCh
     return (
         <React.Fragment>
             <ButtonGroup
-                variant={buttonVariant}
+                variant={darkMode ? "outlined" : "contained"} 
                 ref={anchorRef}
                 aria-label="Load attack test sample"
             >
@@ -58,6 +59,7 @@ export default function InputButtons({ darkMode, buttonVariant, setInputs, setCh
                 >
                     Load Sample
                 </Button>
+                <UploadButton setInputs={setInputs} darkMode={darkMode}/>
             </ButtonGroup>
             <Popper
                 sx={{ zIndex: 1 }}

diff --git a/src/components/Inputs/UploadButton.jsx b/src/components/Inputs/UploadButton.jsx
@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import { styled } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+import yaml from 'js-yaml';
+
+const VisuallyHiddenInput = styled('input')({
+    clip: 'rect(0 0 0 0)',
+    clipPath: 'inset(50%)',
+    height: 1,
+    overflow: 'hidden',
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    whiteSpace: 'nowrap',
+    width: 1,
+});
+
+
+
+
+export default function UploadButton({ darkMode, setInputs }) {
+    const [errorMessage, setErrorMessage] = useState(null);
+
+    const handleFileUpload = async (event) => {
+        const file = event.target.files[0];
+        if (file) {
+            const fileExtension = file.name.split('.').pop().toLowerCase();
+            if (fileExtension !== "yaml" && fileExtension !== "yml") {
+                setErrorMessage("Only yaml files can be uploaded.");
+                console.error("Only yaml files can be uploaded.");
+                return;
+            }
+            try {
+                // Dosyayı okuma işlemi
+                const fileContent = await file.text();
+
+                // YAML parse işlemi
+                const parsed = yaml.load(fileContent);
+                await setInputs(parsed[0]);
+
+                console.log(JSON.stringify(parsed, null, 4));
+
+            } catch (error) {
+                console.error("Error while file processing the yaml file, check format.", error);
+            }
+        }
+    };
+    return (
+        <Button
+            component="label"
+            role={undefined}
+            variant={darkMode ? "outlined" : "contained"} 
+            tabIndex={-1}
+        >
+            Upload YAML
+            <VisuallyHiddenInput
+                type="file"
+                onChange={handleFileUpload}
+                multiple
+            />
+        </Button>
+    );
+}
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -40,7 +40,9 @@ function Navbar( { darkMode, setDarkMode } ) {
 
   // Function to toggle the theme mode
   const handleThemeToggle = () => {
-    setDarkMode(!darkMode);
+    const newMode = !darkMode;
+    setDarkMode(newMode);
+    localStorage.setItem('darkMode', newMode);
   };
 
   return (

diff --git a/src/components/YamlContent.jsx b/src/components/YamlContent.jsx
@@ -61,7 +61,7 @@ function cleanObject(obj) {
 }
 
 // Main component to handle YAML content display and interactions
-function YamlContent({ darkMode, buttonVariant, inputs, setInputs, updated, base, validationErrors, setChanged, changed }) {
+function YamlContent({ darkMode, inputs, setInputs, updated, base, validationErrors, setChanged, changed }) {
   const [formatted_yaml, setFormattedYaml] = React.useState(null); // Stores formatted YAML content
   const [showContent, setShowContent] = React.useState(false); // Toggles YAML content display
   const [showValidationErrors, setShowValidationErrors] = React.useState(false); // Toggles validation error display
@@ -144,7 +144,7 @@ function YamlContent({ darkMode, buttonVariant, inputs, setInputs, updated, base
     <Box>
       {/* Button group for actions: Download, Copy, Reset */}
       <Box sx={{ mb: 2 }}>
-        <ButtonGroup variant={buttonVariant} aria-label="Basic button group">
+        <ButtonGroup variant={darkMode ? "outlined" : "contained"} aria-label="Basic button group">
           <Button disabled={!showContent} onClick={downloadButtonHandle}>
             Download {changed ? "*" : ""}
           </Button>
@@ -160,7 +160,7 @@ function YamlContent({ darkMode, buttonVariant, inputs, setInputs, updated, base
       <Box>
         {showValidationErrors && (
           <Box sx={{ mb: 1 }}>
-            <Alert variant="outlined" severity="warning">
+            <Alert variant={darkMode ? "outlined" : "filled"}  severity="warning">
               <Typography component="span">Some of the required fields are missing.</Typography>
               {[...new Set(validationErrors)].map((error, index) => (
                 <li key={index}>{error}</li>