not sent, empty payload, and large payload cases were handled
This commit is contained in:
parent
e9e5847638
commit
d42acff7d9
@ -13,23 +13,25 @@ const SubmenuWrapper = styled.div`
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
export const MessagesDetails = ({ webhookDetails }) => {
|
export const MessagesDetails = ({ webhookDetails }) => {
|
||||||
|
const menuData = [
|
||||||
|
{
|
||||||
|
id: "webhookRequest",
|
||||||
|
name: "Request",
|
||||||
|
content: <RequestDetails webhookDetails={webhookDetails} />,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
webhookDetails.status >= 200 &&
|
||||||
|
webhookDetails.status < 500 &&
|
||||||
|
menuData.push({
|
||||||
|
id: "webhookResponse",
|
||||||
|
name: "Response",
|
||||||
|
content: <ResponseDetails webhookDetails={webhookDetails} />,
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SubmenuWrapper>
|
<SubmenuWrapper>
|
||||||
<Submenu
|
<Submenu data={menuData} startSelect={0} />
|
||||||
data={[
|
|
||||||
{
|
|
||||||
id: "webhookRequest",
|
|
||||||
name: "Request",
|
|
||||||
content: <RequestDetails webhookDetails={webhookDetails} />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "webhookResponse",
|
|
||||||
name: "Response",
|
|
||||||
content: <ResponseDetails webhookDetails={webhookDetails} />,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
startSelect={0}
|
|
||||||
/>
|
|
||||||
</SubmenuWrapper>
|
</SubmenuWrapper>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -2,23 +2,51 @@ import React from "react";
|
|||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
import { Text, Textarea } from "@docspace/components";
|
import { Text, Textarea } from "@docspace/components";
|
||||||
|
|
||||||
|
import DangerIcon from "PUBLIC_DIR/images/danger.toast.react.svg?url";
|
||||||
|
|
||||||
const DetailsWrapper = styled.div`
|
const DetailsWrapper = styled.div`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
`;
|
`;
|
||||||
|
const ErrorMessageTooltip = styled.div`
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1200px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
background: #f7cdbe;
|
||||||
|
|
||||||
|
box-shadow: 0px 5px 20px rgba(4, 15, 27, 0.07);
|
||||||
|
border-radius: 6px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
margin-bottom: 16px;
|
||||||
|
`;
|
||||||
|
|
||||||
export const RequestDetails = ({ webhookDetails }) => {
|
export const RequestDetails = ({ webhookDetails }) => {
|
||||||
return (
|
return (
|
||||||
<DetailsWrapper>
|
<DetailsWrapper>
|
||||||
|
{webhookDetails.status === 0 && (
|
||||||
|
<ErrorMessageTooltip>
|
||||||
|
<img src={DangerIcon} alt="danger icon" style={{ marginRight: "8px" }} />
|
||||||
|
We couldn’t deliver this payload: failed to connect to host
|
||||||
|
</ErrorMessageTooltip>
|
||||||
|
)}
|
||||||
<Text as="h3" fontWeight={600} style={{ marginBottom: "4px" }}>
|
<Text as="h3" fontWeight={600} style={{ marginBottom: "4px" }}>
|
||||||
Request post header
|
Request post header
|
||||||
</Text>
|
</Text>
|
||||||
<Textarea
|
{webhookDetails.requestHeaders === "" ? (
|
||||||
value={webhookDetails.requestHeaders}
|
<Textarea isDisabled />
|
||||||
enableCopy
|
) : (
|
||||||
hasNumeration
|
<Textarea
|
||||||
isFullHeight
|
value={webhookDetails.requestHeaders}
|
||||||
isJSONField
|
enableCopy
|
||||||
/>
|
hasNumeration
|
||||||
|
isFullHeight
|
||||||
|
isJSONField
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
<Text as="h3" fontWeight={600} style={{ marginBottom: "4px", marginTop: "16px" }}>
|
<Text as="h3" fontWeight={600} style={{ marginBottom: "4px", marginTop: "16px" }}>
|
||||||
Request post body
|
Request post body
|
||||||
</Text>
|
</Text>
|
||||||
|
@ -1,41 +1,71 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import styled from "styled-components";
|
import styled, { css } from "styled-components";
|
||||||
import { Text, Textarea } from "@docspace/components";
|
import { Text, Textarea, Button } from "@docspace/components";
|
||||||
|
|
||||||
import DangerIcon from "PUBLIC_DIR/images/danger.toast.react.svg?url";
|
import json_beautifier from "csvjson-json_beautifier";
|
||||||
|
|
||||||
const DetailsWrapper = styled.div`
|
const DetailsWrapper = styled.div`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
|
.textareaBody {
|
||||||
|
height: 50vh !important;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const ErrorMessageTooltip = styled.div`
|
const LargePayloadStub = styled.div`
|
||||||
width: 100%;
|
box-sizing: border-box;
|
||||||
padding: 8px 12px;
|
|
||||||
background: #f7cdbe;
|
|
||||||
|
|
||||||
box-shadow: 0px 5px 20px rgba(4, 15, 27, 0.07);
|
|
||||||
border-radius: 6px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1200px;
|
||||||
|
padding: 12px 10px;
|
||||||
|
margin-top: 4px;
|
||||||
|
|
||||||
|
background: #f8f9f9;
|
||||||
|
border: 1px solid #eceef1;
|
||||||
|
border-radius: 3px;
|
||||||
|
|
||||||
|
${window.innerWidth <= 440 &&
|
||||||
|
css`
|
||||||
|
justify-content: flex-start;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
row-gap: 16px;
|
||||||
|
`}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
function isJSON(jsonString) {
|
||||||
|
try {
|
||||||
|
const parsedJson = JSON.parse(jsonString);
|
||||||
|
return parsedJson && typeof parsedJson === "object";
|
||||||
|
} catch (e) {}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
export const ResponseDetails = ({ webhookDetails }) => {
|
export const ResponseDetails = ({ webhookDetails }) => {
|
||||||
if (
|
|
||||||
!(
|
|
||||||
webhookDetails.hasOwnProperty("responseHeaders") ||
|
|
||||||
webhookDetails.hasOwnProperty("responsePayload")
|
|
||||||
)
|
|
||||||
) {
|
|
||||||
return (
|
|
||||||
<ErrorMessageTooltip>
|
|
||||||
<img src={DangerIcon} alt="danger icon" style={{ marginRight: "8px" }} />
|
|
||||||
The SSL connection could not be established, see inner exception.
|
|
||||||
</ErrorMessageTooltip>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const responsePayload = webhookDetails.responsePayload?.trim();
|
const responsePayload = webhookDetails.responsePayload?.trim();
|
||||||
|
|
||||||
|
const beautifiedJSON = isJSON(responsePayload)
|
||||||
|
? json_beautifier(JSON.parse(responsePayload), {
|
||||||
|
inlineShortArrays: true,
|
||||||
|
})
|
||||||
|
: responsePayload;
|
||||||
|
|
||||||
|
const numberOfLines = isJSON(responsePayload)
|
||||||
|
? beautifiedJSON.split("\n").length
|
||||||
|
: responsePayload.split("\n").length;
|
||||||
|
|
||||||
|
const openRawPayload = () => {
|
||||||
|
const rawPayload = window.open("");
|
||||||
|
isJSON(responsePayload)
|
||||||
|
? rawPayload.document.write(beautifiedJSON.replace(/(?:\r\n|\r|\n)/g, "<br/>"))
|
||||||
|
: rawPayload.document.write(responsePayload);
|
||||||
|
rawPayload.focus();
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DetailsWrapper>
|
<DetailsWrapper>
|
||||||
<Text as="h3" fontWeight={600} style={{ marginBottom: "4px" }}>
|
<Text as="h3" fontWeight={600} style={{ marginBottom: "4px" }}>
|
||||||
@ -51,10 +81,24 @@ export const ResponseDetails = ({ webhookDetails }) => {
|
|||||||
<Text as="h3" fontWeight={600} style={{ marginBottom: "4px", marginTop: "16px" }}>
|
<Text as="h3" fontWeight={600} style={{ marginBottom: "4px", marginTop: "16px" }}>
|
||||||
Response post body
|
Response post body
|
||||||
</Text>
|
</Text>
|
||||||
{responsePayload === "" ? (
|
{responsePayload.length > 4000 || numberOfLines > 100 ? (
|
||||||
|
<LargePayloadStub>
|
||||||
|
<Text fontWeight={600} color="#657077">
|
||||||
|
Payload is too large to display.
|
||||||
|
</Text>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
onClick={openRawPayload}
|
||||||
|
label="View raw payload"
|
||||||
|
scale={window.innerWidth <= 440}
|
||||||
|
/>
|
||||||
|
</LargePayloadStub>
|
||||||
|
) : responsePayload === "" ? (
|
||||||
<Textarea isDisabled />
|
<Textarea isDisabled />
|
||||||
) : (
|
) : isJSON(responsePayload) ? (
|
||||||
<Textarea value={responsePayload} isJSONField enableCopy hasNumeration isFullHeight />
|
<Textarea value={responsePayload} isJSONField enableCopy hasNumeration isFullHeight />
|
||||||
|
) : (
|
||||||
|
<Textarea value={responsePayload} enableCopy heightScale className="textareaBody" />
|
||||||
)}
|
)}
|
||||||
</DetailsWrapper>
|
</DetailsWrapper>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user