dev v1

import React, { useState, useEffect } from "react";import { makeStyles } from "@mui/styles";import Dialog from "@mui/material/Dialog";import { Input } from "../genericComponents/Input";import GenerateURL from "../../util/APIUrlProvider";import properties from "../../properties/properties";import { PostData } from "../../util/apiInvoker";import { useCustomSnackbar } from "../../contexts/SnackbarContext";import { useRef } from "react";import Button from "../genericComponents/Button";//const fileInputRef = useRef(null);const Test = ({  open = true,  handleClose,  handleSuccess,}) => {  const classes = useStyles();  const { showSnackbar } = useCustomSnackbar();const [isOpen, setIsOpen] = useState(open);  const localStorageKey = "vm_group_creation_info_flag";  const hideInfoSection = JSON.parse(localStorage.getItem(localStorageKey));  const [state, setState] = useState({    showLeftPanel: true,    isLoading: false,    dontShowAgain: false,  });  const [formData, setFormData] = useState({    vmGroupName: "",    environmentRestriction: "",  });  const [errors, setErrors] = useState({});  useEffect(() => {    setIsOpen(open);  }, [open]);  useEffect(() => {    if (open) {      setState((prev) => ({        ...prev,        showLeftPanel: !hideInfoSection,        isLoading: false,        dontShowAgain: !!hideInfoSection,      }));      setFormData({        vmGroupName: "",        environmentRestriction: "",      });      setErrors({});    }  }, [open, hideInfoSection]);  const handleInputChange = (e) => {    const { name, value } = e.target;    setFormData((prev) => ({      ...prev,      [name]: value,    }));    // Clear error when user types    if (errors[name]) {      setErrors((prev) => ({ ...prev, [name]: "" }));    }  };  const handleSave = () => {    // 1. Validation    if (!formData.vmGroupName.trim()) {      setErrors((prev) => ({        ...prev,        vmGroupName: "VM Group Name is required",      }));      showSnackbar("error", "VM Group Name is required");      return;    }    // 2. Prepare Payload    const post_data = {      name: formData.vmGroupName,      environment_restriction: formData.environmentRestriction,    };    // 3. API Call    // const temp_url = GenerateURL({}, properties.api.create_vm_group); // Replace with your actual API endpoint    setState((prev) => ({ ...prev, isLoading: true }));    showSnackbar("info", "Creating VM Group...");    // Mocking API Call for demonstration - Replace with your actual PostData function    console.log("Posting Data:", post_data);    // Simulating PostData success    setTimeout(() => {      setState((prev) => ({ ...prev, isLoading: false }));      showSnackbar("success", "VM Group Created Successfully");      if (handleSuccess) handleSuccess();      handleClose();    }, 1000);    /* // Uncomment and use your actual PostData function    PostData(temp_url, post_data,      (response) => {        setState(prev => ({ ...prev, isLoading: false }));        showSnackbar("success", "VM Group Created Successfully");        if(handleSuccess) handleSuccess();        handleClose();      },      (error) => {        const errorMsg = typeof error === "string" ? error : JSON.stringify(error);        showSnackbar("error", "Unable to create VM Group: " + errorMsg);        setState(prev => ({ ...prev, isLoading: false }));      }    );    */  };  const handleCloseLeftStrip = () => {    if (state.dontShowAgain) {      // localStorage.setItem(localStorageKey, JSON.stringify(true));    }    setState((prev) => ({      ...prev,      showLeftPanel: false,    }));  };const handleDontShowCheckbox = (e) => {  const value = e?.target?.type === "checkbox" ? e.target.checked : e;  setState((prev) => ({ ...prev, dontShowAgain: value }));};const closeDialog = () => {  setFormData({    vmGroupName: "",    environmentRestriction: "",  });  setErrors({});  setIsOpen(false);};  return (    <Dialog      fullWidth={true}      maxWidth={"md"}      open={isOpen}      onClose={closeDialog}      className={`${classes.root} dialog-align-corner`}      aria-labelledby="max-width-dialog-title"    >      <div        className="d-grid ml-auto dialog-sub-component"        style={{          gridTemplateColumns: state.showLeftPanel            ? "396px 650px"            : "0px 650px",        }}      >        {!hideInfoSection && (          <div            className={              state.showLeftPanel                ? "left-panel-dialog bg-white position-relative"                : "left-panel-dialog-down"            }          >            <div              className={                "d-flex align-center space-between left-panel-header pd-10"              }              style={{ padding: "9px 20px" }}            >              <p>INFORMATION</p>              <button                className="btn btn-icon-only"                onClick={handleCloseLeftStrip}              >                <span className="ri-close-line color-icon-secondary"></span>              </button>            </div>            <div className="pd-10" style={{ padding: "16px 20px" }}>              <p className="font-16 font-weight-600 color-primary mb-10">                What is Virtual Machine?              </p>              <p                className="font-12 color-icon-secondary"                style={{ color: "#404040" }}              >                In Buildpiper, for a monolithic application, we need to onboard                the infrastructure required for deployment for the monolithic                applications. This infrastructure is nothing but of VMs (virtual                machines). Thus a virtual machine (VM) is a software-based unit                of a LDC - Local data centre which runs an operating system and                applications just like a physical computer but relies on                virtualization technology to operate.              </p>            </div>            <div              className="checkbox-only-divi"              style={{ padding: "10px 20px" }}            >              <Input                type="simple-checkbox"                name="dont_show_again"                label="Don't show this again"                data={{ dont_show_again: state.dontShowAgain }}                value={state.dontShowAgain}                error={errors}                onChangeHandler={handleDontShowCheckbox}              />            </div>          </div>        )}        <div className="right-panel-dialog bg-white">          <div            className="font-18 font-weight-600 color-white d-flex align-center space-between"            style={{ backgroundColor: "#0086FF", padding: "14px 20px" }}          >            <p>Add Virtual Machine Group</p>            <button              className="btn float-cancel-button"              style={                hideInfoSection || !state.showLeftPanel ? { right: "396px" } : {}              }              onClick={closeDialog}            >              <span className="ri-close-line"></span>            </button>          </div>          <div            className={classes.uploadContent}            style={{              padding: "0 20px 120px 20px",              overflowY: "auto",            }}          >            <div className={classes.formContainer}>              <div className={classes.formGroup}>                <label className={classes.formLabel}>                  VM Group Name                  <span onClick={()=>{}}                    className="ri-information-line font-16 ml-6"                    style={{ color: "#505050" }}                  ></span>                </label>                <input                  type="text"                  name="vmGroupName"                  value={formData.vmGroupName}                  onChange={handleInputChange}                  placeholder="Enter"                  className={classes.formInput}                />                {errors.vmGroupName && (                  <span style={{ color: "red", fontSize: "12px" }}>                    {errors.vmGroupName}                  </span>                )}              </div>              <div className={classes.formGroup}>                <label className={classes.formLabel}>                  Select Environment Restriction                  <span onClick={()=>{}}                    className="ri-information-line font-16 ml-6"                    style={{ color: "#505050" }}                  ></span>                </label>                <select                  className={classes.formSelect}                  name="environmentRestriction"                  value={formData.environmentRestriction}                  onChange={handleInputChange}                >                  <option value="">Select</option>                  <option value="DEV">DEV</option>                  <option value="QA">QA</option>                  <option value="PROD">PROD</option>                </select>              </div>            </div>          </div>          <div className="footer-right-panel d-flex align-center justify-end">            <Button variant="ghost" onClick={closeDialog}>              CANCEL            </Button>            <Button              className="btn btn-primary"              isLoading={state.isLoading}              onClick={handleSave}            >              SAVE & CONTINUE            </Button>          </div>        </div>      </div>    </Dialog>  );};const useStyles = makeStyles((theme) => ({  root: {    "&.dialog-align-corner": {      "& .MuiPaper-root": {        maxWidth: "1100px",        margin: "0",        fontFamily: "Montserrat",      },    },    "& .right-panel-dialog": {      position: "relative",      width: "650px",      height: "100%",      display: "flex",      flexDirection: "column",    },    "& .left-panel-dialog": {      width: "396px",      transition: "width 0.3s",      "& .left-panel-header": {        borderBottom: "1px solid #F1F1F1",        fontSize: "12px",        fontWeight: "600",        color: "#0086FF",      },      "& .checkbox-only-divi": {        position: "absolute",        bottom: "10px",      },    },    "& .left-panel-dialog-down": {      width: "0px",      overflow: "hidden",      transition: "width 0.3s",    },    "& .footer-right-panel": {      backgroundColor: "#FAFAFA",      padding: "20px",      position: "absolute",      bottom: "0px",      width: "650px",      gap: "13px",      borderTop: "1px solid #E6E6E6",    },    "& .wrapper-new-file": {      "& .input-file-wraper": {        border: "none",        padding: "4px",        gap: "0px",        justifyContent: "center",      },    },  },  formContainer: {    width: "100%",    marginTop: "20px",  },  formGroup: {    marginBottom: "20px",  },  formLabel: {    display: "flex",    alignItems: "center",    fontSize: "12px",    fontWeight: "600",    color: "#2F2F2F",    marginBottom: "5px",    reqired: "*",  },  formInput: {    width: "100%",    height: "40px",    border: "1px solid #A7AABE",    borderRadius: "6px",    padding: "0 12px",    fontSize: "14px",    fontWeight: "400",    color: "#787878",  },  formSelect: {    width: "100%",    height: "40px",    border: "1px solid #A7AABE",    borderRadius: "6px",    padding: "0 10px",    fontSize: "12px",    fontWeight: "500",    color: "#2F2F2F",  },}));export default Test;Message Devansh Dwivedi