refactor: update webhook management to use 'create' and 'update' modes

- Changed the webhook input mode from 'edit' to 'update' for consistency across the application.
- Refactored related components and schemas to align with the new mode terminology.
- Introduced a new UpsertWebhookDialog component to streamline the webhook creation and update process.
- Updated the webhooks page to utilize the new dialog, enhancing the user experience in managing webhooks.

These changes aim to improve clarity and maintainability in the webhook management interface.

Author: sarimrmalik

src/core/modules/webhooks/repository.server.ts

@@ -15,7 +15,7 @@ type WebhooksRepositoryDeps = {
 export type WebhooksScope = TeamRequestScope
 
 export interface UpsertWebhookInput {
-  mode: 'create' | 'edit'
+  mode: 'create' | 'update'
   webhookId?: string
   name: string
   url: string
@@ -69,7 +69,7 @@ export function createWebhooksRepository(
     },
     async upsertWebhook(input) {
       const response =
-        input.mode === 'edit'
+        input.mode === 'update'
           ? await deps.infraClient.PATCH('/events/webhooks/{webhookID}', {
               headers: {
                 ...deps.authHeaders(scope.accessToken, scope.teamId),

src/core/server/api/routers/webhooks.ts

@@ -46,7 +46,7 @@ export const webhooksRouter = createTRPCRouter({
         input
 
       const result = await ctx.webhooksRepository.upsertWebhook({
-        mode: mode === 'add' ? 'create' : 'edit',
+        mode,
         webhookId: webhookId ?? undefined,
         name,
         url,
@@ -59,7 +59,7 @@ export const webhooksRouter = createTRPCRouter({
         l.error(
           {
             key:
-              mode === 'edit'
+              mode === 'update'
                 ? 'update_webhook_trpc:error'
                 : 'create_webhook_trpc:error',
             status: result.error.status,
@@ -68,7 +68,7 @@ export const webhooksRouter = createTRPCRouter({
             user_id: ctx.session.user.id,
             context: { mode, name, url, events },
           },
-          `Failed to ${mode === 'edit' ? 'update' : 'create'} webhook: ${result.error.status}: ${result.error.message}`
+          `Failed to ${mode} webhook: ${result.error.status}: ${result.error.message}`
         )
 
         throwTRPCErrorFromRepoError(result.error)

src/core/server/functions/webhooks/schema.ts

@@ -8,7 +8,7 @@ const WebhookSecretSchema = z
 
 export const UpsertWebhookInputSchema = z
   .object({
-    mode: z.enum(['add', 'edit']),
+    mode: z.enum(['create', 'update']),
     webhookId: z.uuid().optional(),
     name: z.string().min(1, 'Name is required').trim(),
     url: WebhookUrlSchema,
@@ -18,7 +18,7 @@ export const UpsertWebhookInputSchema = z
   })
   .refine(
     (data) => {
-      if (data.mode === 'add') {
+      if (data.mode === 'create') {
         return !!data.signatureSecret
       }
       return true

src/features/dashboard/settings/webhooks/table-row.tsx

@@ -21,11 +21,11 @@ import {
 import { TableCell, TableRow } from '@/ui/primitives/table'
 import { useDashboard } from '../../context'
 import { TeamAvatar } from '../../sidebar/team-avatar'
-import WebhookAddEditDialog from './add-edit-dialog'
 import { WEBHOOK_EVENT_LABELS, WEBHOOK_EVENTS } from './constants'
 import WebhookDeleteDialog from './delete-dialog'
 import WebhookEditSecretDialog from './edit-secret-dialog'
 import type { Webhook } from './types'
+import { UpsertWebhookDialog } from './upsert-webhook-dialog'
 
 type WebhookRowProps = {
   webhook: Webhook
@@ -60,11 +60,11 @@ const WebhookRowActions = ({ webhook }: WebhookRowActionsProps) => {
       </DropdownMenuTrigger>
       <DropdownMenuContent>
         <DropdownMenuGroup>
-          <WebhookAddEditDialog mode="edit" webhook={webhook}>
+          <UpsertWebhookDialog mode="update" webhook={webhook}>
             <DropdownMenuItem inset onSelect={(e) => e.preventDefault()}>
               <EditIcon className={actionIconClassName} /> Edit
             </DropdownMenuItem>
-          </WebhookAddEditDialog>
+          </UpsertWebhookDialog>
           <WebhookEditSecretDialog webhook={webhook}>
             <DropdownMenuItem inset onSelect={(e) => e.preventDefault()}>
               <PrivateIcon className={actionIconClassName} /> Rotate Secret

…tings/webhooks/add-edit-dialog-steps.tsx …webhooks/upsert-webhook-dialog-steps.tsxsrc/features/dashboard/settings/webhooks/add-edit-dialog-steps.tsx renamed to src/features/dashboard/settings/webhooks/upsert-webhook-dialog-steps.tsx src/features/dashboard/settings/webhooks/add-edit-dialog-steps.tsx renamed to src/features/dashboard/settings/webhooks/upsert-webhook-dialog-steps.tsx

@@ -26,7 +26,7 @@ import {
   type WebhookEvent,
 } from './constants'
 
-type WebhookAddEditDialogStepsProps = {
+type UpsertWebhookDialogStepsProps = {
   currentStep: number
   form: UseFormReturn<UpsertWebhookInput>
   isLoading: boolean
@@ -35,7 +35,7 @@ type WebhookAddEditDialogStepsProps = {
   allEventsSelected: boolean
   handleAllToggle: () => void
   handleEventToggle: (event: string) => void
-  mode: 'add' | 'edit'
+  mode: 'create' | 'update'
   hasCopied: boolean
   onCopied: () => void
 }
@@ -75,7 +75,7 @@ const WebhookExamplePayload = ({ eventType }: { eventType: WebhookEvent }) => (
   </div>
 )
 
-export function WebhookAddEditDialogSteps({
+export function UpsertWebhookDialogSteps({
   currentStep,
   form,
   isLoading,
@@ -87,7 +87,7 @@ export function WebhookAddEditDialogSteps({
   mode,
   hasCopied,
   onCopied,
-}: WebhookAddEditDialogStepsProps) {
+}: UpsertWebhookDialogStepsProps) {
   const [secretType, setSecretType] = useState<'pre-generated' | 'custom'>(
     'pre-generated'
   )
@@ -111,10 +111,10 @@ export function WebhookAddEditDialogSteps({
     return () => window.clearTimeout(id)
   }, [secretType])
 
-  // sync secret with form state and validation - only in 'add' mode
-  // in 'edit' mode, we should never touch the signature secret
+  // sync secret with form state and validation - only in create mode
+  // in update mode, we should never touch the signature secret
   useEffect(() => {
-    if (mode !== 'add') return
+    if (mode !== 'create') return
 
     if (secretType === 'pre-generated') {
       // set pre-generated secret and trigger validation to clear any errors

…rd/settings/webhooks/add-edit-dialog.tsx …tings/webhooks/upsert-webhook-dialog.tsxsrc/features/dashboard/settings/webhooks/add-edit-dialog.tsx renamed to src/features/dashboard/settings/webhooks/upsert-webhook-dialog.tsx src/features/dashboard/settings/webhooks/add-edit-dialog.tsx renamed to src/features/dashboard/settings/webhooks/upsert-webhook-dialog.tsx

@@ -27,28 +27,28 @@ import { Form } from '@/ui/primitives/form'
 import { AddIcon, CheckIcon } from '@/ui/primitives/icons'
 import { Loader } from '@/ui/primitives/loader'
 import { useDashboard } from '../../context'
-import { WebhookAddEditDialogSteps } from './add-edit-dialog-steps'
 import { WEBHOOK_EVENTS, type WebhookEvent } from './constants'
 import { FinishWebhookSetupDialog } from './finish-webhook-setup-dialog'
 import type { Webhook } from './types'
+import { UpsertWebhookDialogSteps } from './upsert-webhook-dialog-steps'
 
-type WebhookAddEditDialogProps =
+type UpsertWebhookDialogProps =
   | {
       children: React.ReactNode
-      mode: 'add'
+      mode: 'create'
       webhook?: undefined
     }
   | {
       children: React.ReactNode
-      mode: 'edit'
+      mode: 'update'
       webhook: Webhook
     }
 
-export default function WebhookAddEditDialog({
+export function UpsertWebhookDialog({
   children: trigger,
   mode,
   webhook,
-}: WebhookAddEditDialogProps) {
+}: UpsertWebhookDialogProps) {
   'use no memo'
 
   const { team } = useDashboard()
@@ -61,20 +61,20 @@ export default function WebhookAddEditDialog({
   const [hasCopied, setHasCopied] = useState(false)
   const [finishSetupDialogOpen, setFinishSetupDialogOpen] = useState(false)
 
-  const isEditMode = mode === 'edit'
-  const totalSteps = isEditMode ? 1 : 2
+  const isUpdateMode = mode === 'update'
+  const totalSteps = isUpdateMode ? 1 : 2
 
   const listQueryKey = trpc.webhooks.list.queryOptions({
     teamSlug: team.slug,
   }).queryKey
 
   const defaultValues: UpsertWebhookInput = {
-    webhookId: isEditMode ? webhook?.id : undefined,
+    webhookId: isUpdateMode ? webhook?.id : undefined,
     mode,
     name: webhook?.name || '',
     url: webhook?.url || '',
     events: webhook?.events || [],
-    ...(isEditMode ? {} : { signatureSecret: '' }),
+    ...(isUpdateMode ? {} : { signatureSecret: '' }),
   }
 
   const form = useForm<UpsertWebhookInput>({
@@ -90,14 +90,14 @@ export default function WebhookAddEditDialog({
       onSuccess: () => {
         toast(
           defaultSuccessToast(
-            isEditMode
+            isUpdateMode
               ? 'Webhook updated successfully'
               : 'Webhook created successfully'
           )
         )
         void queryClient.invalidateQueries({ queryKey: listQueryKey })
 
-        if (!isEditMode) {
+        if (!isUpdateMode) {
           handleDialogChange(false)
           setFinishSetupDialogOpen(true)
           return
@@ -109,7 +109,7 @@ export default function WebhookAddEditDialog({
         toast(
           defaultErrorToast(
             err.message ||
-              (isEditMode
+              (isUpdateMode
                 ? 'Failed to update webhook'
                 : 'Failed to create webhook')
           )
@@ -211,9 +211,9 @@ export default function WebhookAddEditDialog({
         <DialogContent className="flex flex-col gap-4 px-6 pt-5 pb-6 h-[685px] max-h-[calc(100svh-2rem)] overflow-hidden">
           <DialogHeader className="gap-0.5">
             <DialogTitle>
-              {isEditMode ? 'Edit Webhook' : 'Add Webhook'}
+              {isUpdateMode ? 'Edit Webhook' : 'Add Webhook'}
             </DialogTitle>
-            {!isEditMode && (
+            {!isUpdateMode && (
               <div className="flex items-center gap-2">
                 <span className="text-fg-tertiary prose-label uppercase">
                   Step {currentStep} / {totalSteps}
@@ -230,7 +230,7 @@ export default function WebhookAddEditDialog({
               <input type="hidden" {...form.register('mode')} />
 
               <div className="flex flex-1 flex-col gap-4 min-w-0 min-h-0 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-                <WebhookAddEditDialogSteps
+                <UpsertWebhookDialogSteps
                   currentStep={currentStep}
                   form={form}
                   isLoading={isLoading}
@@ -250,10 +250,10 @@ export default function WebhookAddEditDialog({
                   <div className="flex items-center justify-center py-2 gap-2 w-full">
                     <Loader variant="slash" size="sm" />
                     <span className="prose-body text-fg-secondary">
-                      {isEditMode ? 'Saving Changes...' : 'Adding Webhook...'}
+                      {isUpdateMode ? 'Saving Changes...' : 'Adding Webhook...'}
                     </span>
                   </div>
-                ) : isEditMode ? (
+                ) : isUpdateMode ? (
                   <Button
                     type="submit"
                     className="w-full"

src/features/dashboard/settings/webhooks/webhooks-page-content.tsx

@@ -8,8 +8,8 @@ import { useTRPC } from '@/trpc/client'
 import { Button } from '@/ui/primitives/button'
 import { AddIcon, SearchIcon } from '@/ui/primitives/icons'
 import { Input } from '@/ui/primitives/input'
-import WebhookAddEditDialog from './add-edit-dialog'
 import WebhooksTable from './table'
+import { UpsertWebhookDialog } from './upsert-webhook-dialog'
 
 interface WebhooksPageContentProps {
   teamSlug: string
@@ -104,7 +104,7 @@ export const WebhooksPageContent = ({
           value={query}
         />
 
-        <WebhookAddEditDialog mode="add">
+        <UpsertWebhookDialog mode="create">
           <Button
             className="w-full font-sans normal-case prose-body-highlight md:w-auto md:self-start"
             type="button"
@@ -113,7 +113,7 @@ export const WebhooksPageContent = ({
             <AddIcon aria-hidden className="size-4" />
             Add a webhook
           </Button>
-        </WebhookAddEditDialog>
+        </UpsertWebhookDialog>
       </div>
 
       <div className="text-fg-tertiary flex flex-col gap-1 text-sm lg:flex-row lg:items-start lg:justify-between">