From b766ed2ba618a05d71daebff840884e892937ba6 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Tue, 9 Jul 2024 09:53:40 +0800 Subject: [PATCH 1/3] Tell users that webhooks are now part of rules --- packages/web/pages/settings/webhooks.tsx | 228 +++-------------------- 1 file changed, 23 insertions(+), 205 deletions(-) diff --git a/packages/web/pages/settings/webhooks.tsx b/packages/web/pages/settings/webhooks.tsx index 6db99dddf..3709a9942 100644 --- a/packages/web/pages/settings/webhooks.tsx +++ b/packages/web/pages/settings/webhooks.tsx @@ -13,104 +13,11 @@ import { deleteWebhookMutation } from '../../lib/networking/mutations/deleteWebh import { FormModal } from '../../components/patterns/FormModal' import { setWebhookMutation } from '../../lib/networking/mutations/setWebhookMutation' import { FormInputProps } from '../../components/elements/FormElements' -import { Box } from '../../components/elements/LayoutPrimitives' - -interface Webhook { - id?: string - url: string - eventTypes: string - contentType?: string - method?: string - enabled?: string - createdAt?: Date - updatedAt?: Date -} - -interface EventTypeOption { - label: string - value: WebhookEvent -} +import { Box, VStack } from '../../components/elements/LayoutPrimitives' +import Link from 'next/link' +import { StyledText } from '../../components/elements/StyledText' export default function Webhooks(): JSX.Element { - const { webhooks, revalidate } = useGetWebhooksQuery() - const [onDeleteId, setOnDeleteId] = useState(null) - const [addModelOpen, setAddModelOpen] = useState(false) - const [onEditWebhook, setOnEditWebhook] = useState(null) - const [url, setUrl] = useState('') - const eventTypeOptions: EventTypeOption[] = [ - { label: 'PAGE_CREATED', value: 'PAGE_CREATED' }, - { label: 'PAGE_UPDATED', value: 'PAGE_UPDATED' }, - { label: 'HIGHLIGHT_CREATED', value: 'HIGHLIGHT_CREATED' }, - { label: 'LABEL_ADDED', value: 'LABEL_CREATED' }, - ] - const [eventTypes, setEventTypes] = useState([]) - const [contentType, setContentType] = useState('application/json') - const [method, setMethod] = useState('POST') - const [formInputs, setFormInputs] = useState([]) - - const headers = ['URL', 'Event Types', 'Method', 'Content Type'] - const rows = useMemo(() => { - const rows = new Map() - webhooks.forEach((webhook) => - rows.set(webhook.id, { - url: webhook.url, - eventTypes: eventTypeOptions - .filter((option) => webhook.eventTypes.includes(option.value)) - .map((option) => option.label) - .join(', '), - method: webhook.method, - contentType: webhook.contentType, - }) - ) - return rows - }, [webhooks]) - - applyStoredTheme() - - function validateEventTypes(eventTypes: WebhookEvent[]): boolean { - if (eventTypes.length > 0) return true - showErrorToast('Please select at least one event type', { - position: 'bottom-right', - }) - return false - } - - async function onDelete(id: string): Promise { - const result = await deleteWebhookMutation(id) - if (result) { - showSuccessToast('Webhook deleted', { position: 'bottom-right' }) - } else { - showErrorToast('Failed to delete', { position: 'bottom-right' }) - } - revalidate() - } - - async function onCreate(): Promise { - if (!validateEventTypes(eventTypes)) return - const result = await setWebhookMutation({ url, eventTypes }) - if (result) { - showSuccessToast('Webhook created', { position: 'bottom-right' }) - } else { - showErrorToast('Failed to add', { position: 'bottom-right' }) - } - revalidate() - } - - async function onUpdate(): Promise { - if (!validateEventTypes(eventTypes)) return - const result = await setWebhookMutation({ - id: onEditWebhook?.id, - url, - eventTypes, - }) - if (result) { - showSuccessToast('Webhook updated', { position: 'bottom-right' }) - } else { - showErrorToast('Failed to update', { position: 'bottom-right' }) - } - revalidate() - } - return ( - - {addModelOpen && ( - - )} - - {onEditWebhook && ( - setOnEditWebhook(null)} - inputs={formInputs} - acceptButtonLabel={'Update'} - /> - )} - - {onDeleteId && ( - { - await onDelete(onDeleteId) - setOnDeleteId(null) + + setOnDeleteId(null)} - /> - )} - { - setFormInputs([ - { - label: 'URL', - onChange: setUrl, - name: 'url', - placeholder: 'https://example.com/webhook', - required: true, - }, - { - label: 'Event Types', - name: 'eventTypes', - value: [true, true], - onChange: setEventTypes, - options: eventTypeOptions, - type: 'checkbox', - }, - { - label: 'Method', - name: 'method', - value: method, - disabled: true, - }, - { - label: 'Content Type', - name: 'contentType', - value: contentType, - disabled: true, - }, - ]) - setUrl('') - setEventTypes(['PAGE_CREATED', 'HIGHLIGHT_CREATED']) - setAddModelOpen(true) - }} - onEdit={(webhook) => { - setFormInputs([ - { - label: 'URL', - onChange: setUrl, - name: 'url', - value: webhook?.url, - required: true, - }, - { - label: 'Event Types', - name: 'eventTypes', - value: eventTypeOptions.map((option) => - webhook?.eventTypes.includes(option.label) - ), - onChange: setEventTypes, - options: eventTypeOptions, - type: 'checkbox', - }, - { - label: 'Method', - name: 'method', - value: method, - disabled: true, - }, - { - label: 'Content Type', - name: 'contentType', - value: contentType, - disabled: true, - }, - ]) - setUrl(webhook?.url) - setEventTypes(webhook?.eventTypes) - setOnEditWebhook(webhook) - }} - /> - + > + + Webhooks have been moved to Rules. To + trigger a webhook, create a rule and give it the Webhook action. + + + ) } From 12d356dfa45c0e494495bae1f1701a856b3d44f3 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Tue, 9 Jul 2024 10:08:54 +0800 Subject: [PATCH 2/3] Use next Link --- packages/web/pages/settings/webhooks.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/web/pages/settings/webhooks.tsx b/packages/web/pages/settings/webhooks.tsx index 3709a9942..acef052bf 100644 --- a/packages/web/pages/settings/webhooks.tsx +++ b/packages/web/pages/settings/webhooks.tsx @@ -41,8 +41,9 @@ export default function Webhooks(): JSX.Element { }} > - Webhooks have been moved to Rules. To - trigger a webhook, create a rule and give it the Webhook action. + Webhooks have been moved to{' '} + Rules. To trigger a webhook, + create a rule and give it the Webhook action. From f3876ccd5b04399e43e8935e45e219eb77952283 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Tue, 9 Jul 2024 10:09:26 +0800 Subject: [PATCH 3/3] Remove unused imports --- packages/web/pages/settings/webhooks.tsx | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/packages/web/pages/settings/webhooks.tsx b/packages/web/pages/settings/webhooks.tsx index acef052bf..6a27518be 100644 --- a/packages/web/pages/settings/webhooks.tsx +++ b/packages/web/pages/settings/webhooks.tsx @@ -1,19 +1,6 @@ import { SettingsLayout } from '../../components/templates/SettingsLayout' import { Toaster } from 'react-hot-toast' -import { Table } from '../../components/elements/Table' -import { applyStoredTheme } from '../../lib/themeUpdater' -import { - useGetWebhooksQuery, - WebhookEvent, -} from '../../lib/networking/queries/useGetWebhooksQuery' -import { useMemo, useState } from 'react' -import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers' -import { ConfirmationModal } from '../../components/patterns/ConfirmationModal' -import { deleteWebhookMutation } from '../../lib/networking/mutations/deleteWebhookMutation' -import { FormModal } from '../../components/patterns/FormModal' -import { setWebhookMutation } from '../../lib/networking/mutations/setWebhookMutation' -import { FormInputProps } from '../../components/elements/FormElements' -import { Box, VStack } from '../../components/elements/LayoutPrimitives' +import { VStack } from '../../components/elements/LayoutPrimitives' import Link from 'next/link' import { StyledText } from '../../components/elements/StyledText'