function Details()

in tools/awps-tunnel/client/src/panels/RequestHistory.tsx [187:269]
81 lines of code
5 McCabe index (conditional complexity)

function Details({ item }: { item?: HttpHistoryItem }) {
  if (!item) return <></>;
  const requestMessage: { headers: Record<string, string>, content: string, contentType: string } = parseRawMessage(item.requestRaw);
  const requestTabItems = [
    {
      title: "Formatted Request Details",
      content: (
        <div>
          <label style={{ fontWeight: "bold", marginBottom: "10px" }}>Header</label>
          <Table size={"extra-small"}>
            <TableBody>
              {
                Object.entries(requestMessage.headers).map(([key, value], index) => (
                  index !== 0 &&
                  <TableRow key={index}>
                    <TableCell>
                      <TableCellLayout>{key}</TableCellLayout>
                    </TableCell>
                    <TableCell>
                      <TableCellLayout>{value}</TableCellLayout>
                    </TableCell>
                  </TableRow>
                ))
              }
            </TableBody>
          </Table>
          <label style={{ fontWeight: "bold", marginTop: "10px", marginBottom: "10px" }}>Body</label>
          {renderContent(requestMessage)}
        </div>
      ),
    },
    {
      title: "Raw Request Details",
      content: <div className="m-2" style={{ whiteSpace: "pre-wrap" }}>
        {item.requestRaw}
      </div>,
    },
  ];
  const responseMessage: { headers: Record<string, string>, content: string, contentType: string } = parseRawMessage(item.responseRaw ? item.responseRaw : "");
  const responseTabItems = [
    {
      title: "Formatted Response Details",
      content: (
        <div>
          <label style={{ fontWeight: "bold" }}>Header</label>
          <div className="m-2" style={{ whiteSpace: "pre-wrap" }}>
            {Object.entries(responseMessage.headers).map(([key, value], index) => (
              <div key={index}>
                {key}: {value}
              </div>
            ))}
          </div>
          <label style={{ fontWeight: "bold" }}>Body</label>
          {item.responseRaw && renderContent(responseMessage)}
        </div>
      ),
    }, {
      title: "Raw Response Details",
      content: <div className="m-2" style={{ whiteSpace: "pre-wrap" }}>
        {item.responseRaw}
      </div>,
    },
  ];


  return (
    <div className="panel-container d-flex flex-column flex-fill">
      <div className="banner d-flex">
        <span>{moment(item.requestAtOffset).fromNow()}</span>
      </div>
      <div className="request">
        <h5>
          {item.methodName} {item.url}
        </h5>
        <ReadonlyTabs items={requestTabItems}></ReadonlyTabs>
      </div>
      <div className="response">
        <h5 className={(item?.code ?? 500) < 300 ? "text-success" : "text-warning"}>{item.code}</h5>
        <ReadonlyTabs items={responseTabItems}></ReadonlyTabs>
      </div>
    </div>
  );
}