qualiteer/src/views/alerting/SilencedBox.jsx

import React, { useState, useContext } from "react";
import moment from "moment";
import StoreContext from "@qltr/store";

import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import Typography from "@mui/material/Typography";

import IconButton from "@mui/material/IconButton";
import DeleteIcon from "@mui/icons-material/Delete";
import EditIcon from "@mui/icons-material/Edit";
import Stack from "@mui/material/Stack";

export default function SilencingBox(props) {
  const { silenceEntry, editSilence, removeSilence } = props;

  const {
    name: testName,
    method: testMethod,
    class: testClass,
    id: silenceId,
    expires,
  } = silenceEntry;

  const { state: store, updateStore } = useContext(StoreContext);

  function Actions() {
    return (
      <React.Fragment>
        <IconButton
          aria-label="modify"
          component="span"
          color="primary"
          onClick={editSilence}
        >
          <EditIcon />
        </IconButton>
        <IconButton
          color="error"
          aria-label="delete"
          component="span"
          onClick={removeSilence}
        >
          <DeleteIcon />
        </IconButton>
      </React.Fragment>
    );
  }

  return (
    <Accordion expanded={false} disableGutters={true} square>
      <AccordionSummary
        style={{
          backgroundColor: "rgba(0, 0, 0, .03)",
          flexWrap: "wrap",
        }}
      >
        <Typography component={"span"} style={{ wordBreak: "break-word" }}>
          {`Test Name: ${testName}`}
          <br />
          {`Method: ${testMethod}`}
          <br />
          {`Test Class: ${testClass}`}
          <br />
          {`Silenced Until: ${expires} Remaining Time: ${moment(
            moment(expires).diff(moment())
          ).format("HH:mm")}`}
        </Typography>

        <Stack
          sx={{
            ml: "auto",
            mb: "auto",
            mt: "auto",
            whiteSpace: "nowrap",
            display: { md: "none", lg: "none", xl: "none" },
          }}
        >
          <Actions />
        </Stack>
        <Stack
          direction="row"
          sx={{
            ml: "auto",
            mb: "auto",
            mt: "auto",
            display: { xs: "none", sm: "none", md: "block", lg: "block" },
          }}
        >
          <Actions />
        </Stack>
      </AccordionSummary>
    </Accordion>
  );
}