update: webhooks
This commit is contained in:
parent
1c61fcc17a
commit
94066d4408
|
@ -14,6 +14,7 @@ import {
|
||||||
ModalFooter,
|
ModalFooter,
|
||||||
ModalHeader,
|
ModalHeader,
|
||||||
ModalOverlay,
|
ModalOverlay,
|
||||||
|
Select,
|
||||||
Switch,
|
Switch,
|
||||||
Text,
|
Text,
|
||||||
useDisclosure,
|
useDisclosure,
|
||||||
|
@ -22,6 +23,7 @@ import {
|
||||||
import { FaMinusCircle, FaPlus } from 'react-icons/fa';
|
import { FaMinusCircle, FaPlus } from 'react-icons/fa';
|
||||||
import { useClient } from 'urql';
|
import { useClient } from 'urql';
|
||||||
import {
|
import {
|
||||||
|
webhookEventNames,
|
||||||
ArrayInputOperations,
|
ArrayInputOperations,
|
||||||
WebhookInputDataFields,
|
WebhookInputDataFields,
|
||||||
WebhookInputHeaderFields,
|
WebhookInputHeaderFields,
|
||||||
|
@ -33,6 +35,7 @@ import {
|
||||||
validateURI,
|
validateURI,
|
||||||
} from '../utils';
|
} from '../utils';
|
||||||
import { AddWebhook, EditWebhook } from '../graphql/mutation';
|
import { AddWebhook, EditWebhook } from '../graphql/mutation';
|
||||||
|
import { rest } from 'lodash';
|
||||||
|
|
||||||
interface headersDataType {
|
interface headersDataType {
|
||||||
[WebhookInputHeaderFields.KEY]: string;
|
[WebhookInputHeaderFields.KEY]: string;
|
||||||
|
@ -76,20 +79,18 @@ interface webhookDataType {
|
||||||
}
|
}
|
||||||
|
|
||||||
interface validatorDataType {
|
interface validatorDataType {
|
||||||
[WebhookInputDataFields.EVENT_NAME]: boolean;
|
|
||||||
[WebhookInputDataFields.ENDPOINT]: boolean;
|
[WebhookInputDataFields.ENDPOINT]: boolean;
|
||||||
[WebhookInputDataFields.HEADERS]: headersValidatorDataType[];
|
[WebhookInputDataFields.HEADERS]: headersValidatorDataType[];
|
||||||
}
|
}
|
||||||
|
|
||||||
const initWebhookData: webhookDataType = {
|
const initWebhookData: webhookDataType = {
|
||||||
[WebhookInputDataFields.EVENT_NAME]: '',
|
[WebhookInputDataFields.EVENT_NAME]: webhookEventNames.USER_LOGIN,
|
||||||
[WebhookInputDataFields.ENDPOINT]: '',
|
[WebhookInputDataFields.ENDPOINT]: '',
|
||||||
[WebhookInputDataFields.ENABLED]: false,
|
[WebhookInputDataFields.ENABLED]: false,
|
||||||
[WebhookInputDataFields.HEADERS]: [{ ...initHeadersData }],
|
[WebhookInputDataFields.HEADERS]: [{ ...initHeadersData }],
|
||||||
};
|
};
|
||||||
|
|
||||||
const initWebhookValidatorData: validatorDataType = {
|
const initWebhookValidatorData: validatorDataType = {
|
||||||
[WebhookInputDataFields.EVENT_NAME]: true,
|
|
||||||
[WebhookInputDataFields.ENDPOINT]: true,
|
[WebhookInputDataFields.ENDPOINT]: true,
|
||||||
[WebhookInputDataFields.HEADERS]: [{ ...initHeadersValidatorData }],
|
[WebhookInputDataFields.HEADERS]: [{ ...initHeadersValidatorData }],
|
||||||
};
|
};
|
||||||
|
@ -118,10 +119,6 @@ const UpdateWebhookModal = ({
|
||||||
switch (inputType) {
|
switch (inputType) {
|
||||||
case WebhookInputDataFields.EVENT_NAME:
|
case WebhookInputDataFields.EVENT_NAME:
|
||||||
setWebhook({ ...webhook, [inputType]: value });
|
setWebhook({ ...webhook, [inputType]: value });
|
||||||
setValidator({
|
|
||||||
...validator,
|
|
||||||
[WebhookInputDataFields.EVENT_NAME]: validateEventName(value),
|
|
||||||
});
|
|
||||||
break;
|
break;
|
||||||
case WebhookInputDataFields.ENDPOINT:
|
case WebhookInputDataFields.ENDPOINT:
|
||||||
setWebhook({ ...webhook, [inputType]: value });
|
setWebhook({ ...webhook, [inputType]: value });
|
||||||
|
@ -210,7 +207,6 @@ const UpdateWebhookModal = ({
|
||||||
!loading &&
|
!loading &&
|
||||||
webhook[WebhookInputDataFields.EVENT_NAME].length > 0 &&
|
webhook[WebhookInputDataFields.EVENT_NAME].length > 0 &&
|
||||||
webhook[WebhookInputDataFields.ENDPOINT].length > 0 &&
|
webhook[WebhookInputDataFields.ENDPOINT].length > 0 &&
|
||||||
validator[WebhookInputDataFields.EVENT_NAME] &&
|
|
||||||
validator[WebhookInputDataFields.ENDPOINT] &&
|
validator[WebhookInputDataFields.ENDPOINT] &&
|
||||||
!validator[WebhookInputDataFields.HEADERS].some(
|
!validator[WebhookInputDataFields.HEADERS].some(
|
||||||
(headerData: headersValidatorDataType) =>
|
(headerData: headersValidatorDataType) =>
|
||||||
|
@ -256,6 +252,7 @@ const UpdateWebhookModal = ({
|
||||||
} else {
|
} else {
|
||||||
res = await client.mutation(AddWebhook, { params }).toPromise();
|
res = await client.mutation(AddWebhook, { params }).toPromise();
|
||||||
}
|
}
|
||||||
|
setLoading(false);
|
||||||
if (res.error) {
|
if (res.error) {
|
||||||
toast({
|
toast({
|
||||||
title: capitalizeFirstLetter(res.error.message),
|
title: capitalizeFirstLetter(res.error.message),
|
||||||
|
@ -263,8 +260,6 @@ const UpdateWebhookModal = ({
|
||||||
status: 'error',
|
status: 'error',
|
||||||
position: 'bottom-right',
|
position: 'bottom-right',
|
||||||
});
|
});
|
||||||
setLoading(false);
|
|
||||||
return;
|
|
||||||
} else if (res.data?._add_webhook || res.data?._update_webhook) {
|
} else if (res.data?._add_webhook || res.data?._update_webhook) {
|
||||||
toast({
|
toast({
|
||||||
title: capitalizeFirstLetter(
|
title: capitalizeFirstLetter(
|
||||||
|
@ -280,9 +275,8 @@ const UpdateWebhookModal = ({
|
||||||
});
|
});
|
||||||
setValidator({ ...initWebhookValidatorData });
|
setValidator({ ...initWebhookValidatorData });
|
||||||
fetchWebookData();
|
fetchWebookData();
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
setLoading(false);
|
view === UpdateWebhookModalViews.ADD && onClose();
|
||||||
};
|
};
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (
|
if (
|
||||||
|
@ -361,21 +355,24 @@ const UpdateWebhookModal = ({
|
||||||
>
|
>
|
||||||
<Flex flex="1">Event Name</Flex>
|
<Flex flex="1">Event Name</Flex>
|
||||||
<Flex flex="3">
|
<Flex flex="3">
|
||||||
<InputGroup size="md">
|
<Select
|
||||||
<Input
|
size="md"
|
||||||
pr="4.5rem"
|
value={webhook[WebhookInputDataFields.EVENT_NAME]}
|
||||||
type="text"
|
onChange={(e) =>
|
||||||
placeholder="user.login"
|
inputChangehandler(
|
||||||
value={webhook[WebhookInputDataFields.EVENT_NAME]}
|
WebhookInputDataFields.EVENT_NAME,
|
||||||
isInvalid={!validator[WebhookInputDataFields.EVENT_NAME]}
|
e.currentTarget.value
|
||||||
onChange={(e) =>
|
)
|
||||||
inputChangehandler(
|
}
|
||||||
WebhookInputDataFields.EVENT_NAME,
|
>
|
||||||
e.currentTarget.value
|
{Object.entries(webhookEventNames).map(
|
||||||
)
|
([key, value]: any) => (
|
||||||
}
|
<option value={value} key={key}>
|
||||||
/>
|
{key}
|
||||||
</InputGroup>
|
</option>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</Select>
|
||||||
</Flex>
|
</Flex>
|
||||||
</Flex>
|
</Flex>
|
||||||
<Flex
|
<Flex
|
||||||
|
|
|
@ -173,3 +173,12 @@ export enum UpdateWebhookModalViews {
|
||||||
}
|
}
|
||||||
|
|
||||||
export const pageLimits: number[] = [5, 10, 15];
|
export const pageLimits: number[] = [5, 10, 15];
|
||||||
|
|
||||||
|
export const webhookEventNames = {
|
||||||
|
USER_SIGNUP: 'user.signup',
|
||||||
|
USER_CREATED: 'user.created',
|
||||||
|
USER_LOGIN: 'user.login',
|
||||||
|
USER_DELETED: 'user.deleted',
|
||||||
|
USER_ACCESS_ENABLED: 'user.access_enabled',
|
||||||
|
USER_ACCESS_REVOKED: 'user.access_revoked',
|
||||||
|
};
|
||||||
|
|
Loading…
Reference in New Issue
Block a user