hetty/admin/src/lib/components/Response.tsx

import { Box, Typography } from "@mui/material";

import { sortKeyValuePairs } from "./KeyValuePair";
import ResponseTabs from "./ResponseTabs";

import ResponseStatus from "lib/components/ResponseStatus";
import { HttpResponseLog } from "lib/graphql/generated";

interface ResponseProps {
  response?: HttpResponseLog | null;
}

function Response({ response }: ResponseProps): JSX.Element {
  return (
    <Box height="100%">
      <Box sx={{ position: "absolute", right: 0, mt: 1.4 }}>
        <Typography variant="overline" color="textSecondary" sx={{ float: "right", ml: 3 }}>
          Response
        </Typography>
        {response && (
          <Box sx={{ float: "right", mt: 0.2 }}>
            <ResponseStatus
              proto={response.proto}
              statusCode={response.statusCode}
              statusReason={response.statusReason}
            />
          </Box>
        )}
      </Box>
      <ResponseTabs
        body={response?.body}
        headers={sortKeyValuePairs(response?.headers || [])}
        hasResponse={response !== undefined && response !== null}
      />
    </Box>
  );
}

export default Response;