devstack/authorizer
4
0
Fork 0
Code Pull Requests Actions Activity

fix: payload example for webhook

Browse Source
This commit is contained in:
Lakhan Samani 2022-08-09 10:04:06 +05:30
parent 5c6e643efb
commit 58749497bd
1 changed files with 53 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
dashboard/src/components/UpdateWebhookModal.tsx
View File

@ -21,6 +21,9 @@ import {
Text,
useDisclosure,
useToast,
Alert,
AlertIcon,
Divider,
} from '@chakra-ui/react';
import {
FaAngleDown,
@ -468,68 +471,12 @@ const UpdateWebhookModal = ({
</Text>
</Flex>
</Flex>
<Flex
width="100%"
justifyContent="center"
alignItems="center"
marginBottom="5%"
flexDirection="column"
>
<Flex
width="100%"
justifyContent="space-between"
alignItems="center"
>
<Flex>
Payload
<Text color="gray.500" ml={1}>
(example)
</Text>
</Flex>
<Button
onClick={() => setIsShowingPayload(!isShowingPayload)}
variant="ghost"
>
{isShowingPayload ? <FaAngleUp /> : <FaAngleDown />}
</Button>
</Flex>
<Collapse
style={{
marginTop: 10,
width: '100%',
}}
in={isShowingPayload}
>
<Code
width="inherit"
borderRadius={5}
padding={2}
position="relative"
>
<pre style={{ overflow: 'auto' }}>
{webhookPayloadExample}
</pre>
{isShowingPayload && (
<Flex
position="absolute"
top={4}
right={4}
cursor="pointer"
onClick={() =>
copyTextToClipboard(webhookPayloadExample)
}
>
<FaRegClone color="#bfbfbf" />
</Flex>
)}
</Code>
</Collapse>
</Flex>
<Flex
width="100%"
justifyContent="space-between"
alignItems="center"
marginBottom="2%"
marginBottom="5%"
>
<Flex>Headers</Flex>
<Flex>
@ -546,7 +493,8 @@ const UpdateWebhookModal = ({
</Button>
</Flex>
</Flex>
<Flex flexDirection="column" maxH={220} overflowY="scroll">
<Flex flexDirection="column" maxH={220} overflowY="auto">
{webhook[WebhookInputDataFields.HEADERS]?.map(
(headerData, index) => (
<Flex
@ -615,6 +563,52 @@ const UpdateWebhookModal = ({
)
)}
</Flex>
<Divider marginY={5} />
<Alert
status="info"
onClick={() => setIsShowingPayload(!isShowingPayload)}
borderRadius="5"
>
<AlertIcon />
<Flex
width="100%"
justifyContent="space-between"
alignItems="center"
>
Checkout the example payload
{isShowingPayload ? <FaAngleUp /> : <FaAngleDown />}
</Flex>
</Alert>
<Collapse
style={{
marginTop: 10,
width: '100%',
}}
in={isShowingPayload}
>
<Code
width="inherit"
borderRadius={5}
padding={2}
position="relative"
>
<pre style={{ overflow: 'auto' }}>
{webhookPayloadExample}
</pre>
{isShowingPayload && (
<Flex
position="absolute"
top={4}
right={4}
cursor="pointer"
onClick={() => copyTextToClipboard(webhookPayloadExample)}
>
<FaRegClone color="#bfbfbf" />
</Flex>
)}
</Code>
</Collapse>
</Flex>
</ModalBody>
<ModalFooter>