response and request details are displayed properly

This commit is contained in:
Vladimir Khvan 2023-04-16 20:49:38 +05:00
parent c32fe6db91
commit 5b6bc13884
3 changed files with 52 additions and 14 deletions

View File

@ -3,6 +3,7 @@ import styled from "styled-components";
import Submenu from "@docspace/components/submenu";
import { RequestDetails } from "./RequestDetails";
import { ResponseDetails } from "./ResponseDetails";
const SubmenuWrapper = styled.div`
.sticky {
@ -10,7 +11,7 @@ const SubmenuWrapper = styled.div`
}
`;
export const MessagesDetails = () => {
export const MessagesDetails = ({ webhookDetails }) => {
return (
<SubmenuWrapper>
<Submenu
@ -18,12 +19,12 @@ export const MessagesDetails = () => {
{
id: "webhookRequest",
name: "Request",
content: <RequestDetails />,
content: <RequestDetails webhookDetails={webhookDetails} />,
},
{
id: "webhookResponse",
name: "Response",
content: <RequestDetails />,
content: <ResponseDetails webhookDetails={webhookDetails} />,
},
]}
startSelect={0}

View File

@ -2,26 +2,33 @@ import React from "react";
import styled from "styled-components";
import { Text, Textarea } from "@docspace/components";
const RequestDetailsWrapper = styled.div`
const DetailsWrapper = styled.div`
width: 100%;
`;
export const RequestDetails = () => {
const requestHeader =
'{"Accept": ["*/*"], "x-docspace-signature-256": ["sha256=AE7E0F511A76DD6DE81A5CB194721E2B99120115AC8F3F9BE06DB19609EC854F"]}';
const requestBody =
'{"response":{"folderId":2,"version":1,"versionGroup":1,"contentLength":"1,08 Мб","pureContentLength":1132381,"fileStatus":0,"mute":false,"viewUrl":"http://localhost:8092/filehandler.ashx?action=download&fileid=5","webUrl":"http://localhost:8092/doceditor?fileid=5&version=1","fileType":6,"fileExst":".pptx","comment":"Создано","thumbnailStatus":0,"denyDownload":false,"denySharing":false,"viewAccessability":{"ImageView":false,"MediaView":false,"WebView":true,"WebEdit":true,"WebReview":false,"WebCustomFilterEditing":false,"WebRestrictedEditing":false,"WebComment":true,"CoAuhtoring":true,"Convert":false},"id":5,"rootFolderId":2,"canShare":true,"security":{"Read":true,"Comment":true,"FillForms":true,"Review":true,"Edit":true,"Delete":true,"CustomFilter":true,"Rename":true,"ReadHistory":true,"Lock":false,"EditHistory":true,"Copy":true,"Move":true,"Duplicate":true},"title":"ONLYOFFICE Sample Presentation.pptx","access":0,"shared":false,"created":"2023-03-21T12:32:13.0000000+05:00","createdBy":{"id":"66faa6e4-f133-11ea-b126-00ffeec8b4ef","displayName":" Administrator","avatarSmall":"/static/images/default_user_photo_size_32-32.png?hash=1587389534","profileUrl":"http://localhost:8092/accounts/view/administrator","hasAvatar":false},"updated":"2023-03-21T12:32:13.0000000+05:00","rootFolderType":5,"updatedBy":{"id":"66faa6e4-f133-11ea-b126-00ffeec8b4ef","displayName":" Administrator","avatarSmall":"/static/images/default_user_photo_size_32-32.png?hash=1587389534","profileUrl":"http://localhost:8092/accounts/view/administrator","hasAvatar":false}},"count":1,"links":[{"href":"http://localhost:8092/api/2.0/files/file/5/recent","action":"POST"}],"status":0,"statusCode":200}';
export const RequestDetails = ({ webhookDetails }) => {
return (
<RequestDetailsWrapper>
<DetailsWrapper>
<Text as="h3" fontWeight={600} style={{ marginBottom: "4px" }}>
Request post header
</Text>
<Textarea value={requestHeader} enableCopy hasNumeration isFullHeight isJSONField />
<Textarea
value={webhookDetails.requestHeaders}
enableCopy
hasNumeration
isFullHeight
isJSONField
/>
<Text as="h3" fontWeight={600} style={{ marginBottom: "4px", marginTop: "16px" }}>
Request post body
</Text>
<Textarea value={requestBody} isJSONField enableCopy hasNumeration isFullHeight />
</RequestDetailsWrapper>
<Textarea
value={webhookDetails.requestPayload}
isJSONField
enableCopy
hasNumeration
isFullHeight
/>
</DetailsWrapper>
);
};

View File

@ -0,0 +1,30 @@
import React from "react";
import styled from "styled-components";
import { Text, Textarea } from "@docspace/components";
const DetailsWrapper = styled.div`
width: 100%;
`;
export const ResponseDetails = ({ webhookDetails }) => {
const responsePayload = webhookDetails.responsePayload.trim();
return (
<DetailsWrapper>
<Text as="h3" fontWeight={600} style={{ marginBottom: "4px" }}>
Response post header
</Text>
<Textarea
value={webhookDetails.responseHeaders}
enableCopy
hasNumeration
isFullHeight
isJSONField
/>
<Text as="h3" fontWeight={600} style={{ marginBottom: "4px", marginTop: "16px" }}>
Response post body
</Text>
<Textarea value={responsePayload} isJSONField enableCopy hasNumeration isFullHeight />
</DetailsWrapper>
);
};