From f25f0d5438e8ab77b8c3968769e433040dc7e77a Mon Sep 17 00:00:00 2001 From: Tudor Stanciu Date: Sun, 31 Mar 2024 22:57:58 +0300 Subject: [PATCH] MachineAccordion component upgrade --- .../machines/components/MachineAccordion.js | 94 ---------------- .../machines/components/MachineAccordion.tsx | 106 ++++++++++++++++++ frontend/src/types/index.ts | 5 + frontend/src/types/models.ts | 8 ++ 4 files changed, 119 insertions(+), 94 deletions(-) delete mode 100644 frontend/src/features/machines/components/MachineAccordion.js create mode 100644 frontend/src/features/machines/components/MachineAccordion.tsx create mode 100644 frontend/src/types/index.ts create mode 100644 frontend/src/types/models.ts diff --git a/frontend/src/features/machines/components/MachineAccordion.js b/frontend/src/features/machines/components/MachineAccordion.js deleted file mode 100644 index 6fd5266..0000000 --- a/frontend/src/features/machines/components/MachineAccordion.js +++ /dev/null @@ -1,94 +0,0 @@ -import React from "react"; -import PropTypes from "prop-types"; -import { Accordion, AccordionSummary, AccordionDetails, Grid } from "@mui/material"; -import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; -import MachineCollapsedContent from "./common/MachineCollapsedContent"; -import { DataLabel } from "../../../components/common"; -import { useTranslation } from "react-i18next"; -import { useSensitiveInfo } from "../../../hooks"; -import ActionsGroup from "./common/ActionsGroup"; -import { styled } from "@mui/system"; - -const IconLeftAccordionSummary = styled(AccordionSummary)(({ theme }) => ({ - root: { - minHeight: "20px", - height: "42px", - [theme.breakpoints.down("md")]: { - height: "62px" - }, - [theme.breakpoints.down("sm")]: { - height: "102px" - } - }, - expandIcon: { - order: -1 - } -})); - -const GridCell = ({ label, value }) => { - const { mask } = useSensitiveInfo(); - return ( - - - - ); -}; - -GridCell.propTypes = { - label: PropTypes.string.isRequired, - value: PropTypes.string.isRequired -}; - -const MachineAccordion = ({ machine, actions, logs, addLog }) => { - const { t } = useTranslation(); - return ( - - } - aria-label="Expand" - aria-controls="additional-actions1-content" - id="additional-actions1-header" - IconButtonProps={{ edge: "start" }} - > - - - - - - - - - - - - - - - - - - - ); -}; - -MachineAccordion.propTypes = { - machine: PropTypes.shape({ - machineId: PropTypes.number.isRequired, - machineName: PropTypes.string.isRequired, - fullMachineName: PropTypes.string.isRequired, - macAddress: PropTypes.string.isRequired, - iPv4Address: PropTypes.string, - description: PropTypes.string - }).isRequired, - actions: PropTypes.array.isRequired, - logs: PropTypes.array.isRequired, - addLog: PropTypes.func.isRequired -}; - -export default MachineAccordion; diff --git a/frontend/src/features/machines/components/MachineAccordion.tsx b/frontend/src/features/machines/components/MachineAccordion.tsx new file mode 100644 index 0000000..e78598b --- /dev/null +++ b/frontend/src/features/machines/components/MachineAccordion.tsx @@ -0,0 +1,106 @@ +import React from "react"; +import { styled } from "@mui/material/styles"; +import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; +import MuiAccordion, { AccordionProps } from "@mui/material/Accordion"; +import MuiAccordionSummary, { AccordionSummaryProps } from "@mui/material/AccordionSummary"; +import MuiAccordionDetails from "@mui/material/AccordionDetails"; +import { models } from "types"; +import { Grid } from "@mui/material"; +import ActionsGroup from "./common/ActionsGroup"; +import { useTranslation } from "react-i18next"; +import { useSensitiveInfo } from "hooks"; +import { DataLabel } from "components/common"; +import MachineCollapsedContent from "./common/MachineCollapsedContent"; + +const Accordion = styled((props: AccordionProps) => )( + ({ theme }) => ({ + border: `1px solid ${theme.palette.divider}`, + "&:not(:last-child)": { + borderBottom: 0 + }, + "&::before": { + display: "none" + } + }) +); + +const AccordionSummary = styled((props: AccordionSummaryProps) => ( + } {...props} /> +))(({ theme }) => ({ + backgroundColor: theme.palette.mode === "dark" ? "rgba(255, 255, 255, .05)" : "rgba(0, 0, 0, .03)", + flexDirection: "row-reverse", + "& .MuiAccordionSummary-expandIconWrapper.Mui-expanded": { + transform: "rotate(180deg)" + }, + "& .MuiAccordionSummary-content": { + marginLeft: theme.spacing(1) + }, + minHeight: "20px", + height: "42px", + [theme.breakpoints.down("md")]: { + height: "62px" + }, + [theme.breakpoints.down("sm")]: { + height: "102px" + } +})); + +const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({ + padding: theme.spacing(1), + borderTop: "1px solid rgba(0, 0, 0, .125)" +})); + +type GridCellProps = { + label: string; + value: string; +}; + +const GridCell: React.FC = ({ label, value }) => { + const { mask } = useSensitiveInfo(); + return ( + + + + ); +}; + +type Props = { + machine: models.Machine; + actions: Array; // Replace any with the actual type of the actions + logs: Array; // Replace any with the actual type of the logs + addLog: () => void; // Replace with the actual function signature +}; + +const MachineAccordion: React.FC = ({ machine, actions, logs, addLog }) => { + const { t } = useTranslation(); + return ( + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default MachineAccordion; diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts new file mode 100644 index 0000000..b471b7f --- /dev/null +++ b/frontend/src/types/index.ts @@ -0,0 +1,5 @@ +import * as models from "./models"; + +export * from "./models"; + +export { models }; diff --git a/frontend/src/types/models.ts b/frontend/src/types/models.ts new file mode 100644 index 0000000..769e43b --- /dev/null +++ b/frontend/src/types/models.ts @@ -0,0 +1,8 @@ +export type Machine = { + machineId: number; + machineName: string; + fullMachineName: string; + macAddress: string; + iPv4Address?: string; + description?: string; +};