MachineAccordion component upgrade

frontend/src/features/machines/components/MachineAccordion.js

@@ -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 (
-    <Grid item xs={12} md={6} lg={3}>
-      <DataLabel label={label} data={mask(value)} />
-    </Grid>
-  );
-};
-
-GridCell.propTypes = {
-  label: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired
-};
-
-const MachineAccordion = ({ machine, actions, logs, addLog }) => {
-  const { t } = useTranslation();
-  return (
-    <Accordion>
-      <IconLeftAccordionSummary
-        expandIcon={<ExpandMoreIcon />}
-        aria-label="Expand"
-        aria-controls="additional-actions1-content"
-        id="additional-actions1-header"
-        IconButtonProps={{ edge: "start" }}
-      >
-        <Grid
-          container
-          sx={{
-            justifyContent: "center",
-            alignItems: "center"
-          }}
-        >
-          <Grid item xs={11}>
-            <Grid container>
-              <GridCell label={t("Machine.FullName")} value={machine.fullMachineName} />
-              <GridCell label={t("Machine.Name")} value={machine.machineName} />
-              <GridCell label={t("Machine.IP")} value={machine.iPv4Address} />
-              <GridCell label={t("Machine.MAC")} value={machine.macAddress} />
-            </Grid>
-          </Grid>
-          <Grid item xs={1} style={{ textAlign: "right" }}>
-            <ActionsGroup machine={machine} actions={actions} addLog={addLog} />
-          </Grid>
-        </Grid>
-      </IconLeftAccordionSummary>
-      <AccordionDetails>
-        <MachineCollapsedContent description={machine.description} logs={logs} style={{ width: "100%" }} />
-      </AccordionDetails>
-    </Accordion>
-  );
-};
-
-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;

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) => <MuiAccordion disableGutters elevation={0} square {...props} />)(
+  ({ theme }) => ({
+    border: `1px solid ${theme.palette.divider}`,
+    "&:not(:last-child)": {
+      borderBottom: 0
+    },
+    "&::before": {
+      display: "none"
+    }
+  })
+);
+
+const AccordionSummary = styled((props: AccordionSummaryProps) => (
+  <MuiAccordionSummary expandIcon={<ExpandMoreIcon />} {...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<GridCellProps> = ({ label, value }) => {
+  const { mask } = useSensitiveInfo();
+  return (
+    <Grid item xs={12} md={6} lg={3}>
+      <DataLabel label={label} data={mask(value)} />
+    </Grid>
+  );
+};
+
+type Props = {
+  machine: models.Machine;
+  actions: Array<any>; // Replace any with the actual type of the actions
+  logs: Array<any>; // Replace any with the actual type of the logs
+  addLog: () => void; // Replace with the actual function signature
+};
+
+const MachineAccordion: React.FC<Props> = ({ machine, actions, logs, addLog }) => {
+  const { t } = useTranslation();
+  return (
+    <Accordion>
+      <AccordionSummary aria-controls={`machine-${machine.machineId}-summary`} id={`machine-${machine.machineId}`}>
+        <Grid
+          container
+          sx={{
+            justifyContent: "center",
+            alignItems: "center"
+          }}
+        >
+          <Grid item xs={11}>
+            <Grid container>
+              <GridCell label={t("Machine.FullName")} value={machine.fullMachineName} />
+              <GridCell label={t("Machine.Name")} value={machine.machineName} />
+              <GridCell label={t("Machine.IP")} value={machine.iPv4Address || ""} />
+              <GridCell label={t("Machine.MAC")} value={machine.macAddress} />
+            </Grid>
+          </Grid>
+          <Grid item xs={1} style={{ textAlign: "right" }}>
+            <ActionsGroup machine={machine} actions={actions} addLog={addLog} />
+          </Grid>
+        </Grid>
+      </AccordionSummary>
+      <AccordionDetails>
+        <MachineCollapsedContent description={machine.description} logs={logs} style={{ width: "100%" }} />
+      </AccordionDetails>
+    </Accordion>
+  );
+};
+
+export default MachineAccordion;

frontend/src/types/index.ts

@@ -0,0 +1,5 @@
+import * as models from "./models";
+
+export * from "./models";
+
+export { models };

frontend/src/types/models.ts

@@ -0,0 +1,8 @@
+export type Machine = {
+  machineId: number;
+  machineName: string;
+  fullMachineName: string;
+  macAddress: string;
+  iPv4Address?: string;
+  description?: string;
+};