Feature: Abililty to duplicate triggers from the dashboard (supabase#39828)

* updated to support on close and duplicate

* updated formatting

* added confirmation panel for triggers

* updated form to select the correct table for defaults

* updated to support trigger intial tables selected

* updated to mark select field as dirty

* Update apps/studio/components/interfaces/Database/Triggers/TriggerSheet.tsx

Co-authored-by: Charis <[email protected]>

* Update apps/studio/components/interfaces/Database/Triggers/TriggerSheet.tsx

Co-authored-by: Charis <[email protected]>

* updated to remove undefined error

---------

Co-authored-by: Charis <[email protected]>

Author: awaseem

apps/studio/components/interfaces/Database/Triggers/TriggerSheet.tsx

@@ -40,6 +40,7 @@ import {
   TRIGGER_ORIENTATIONS,
   TRIGGER_TYPES,
 } from './Triggers.constants'
+import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 
 const formId = 'create-trigger'
 
@@ -75,20 +76,27 @@ const defaultValues: z.infer<typeof FormSchema> = {
 
 interface TriggerSheetProps {
   selectedTrigger?: PostgresTrigger
+  isDuplicatingTrigger?: boolean
   open: boolean
-  setOpen: (val: boolean) => void
+  onClose: () => void
 }
 
-export const TriggerSheet = ({ selectedTrigger, open, setOpen }: TriggerSheetProps) => {
+export const TriggerSheet = ({
+  selectedTrigger,
+  isDuplicatingTrigger,
+  open,
+  onClose,
+}: TriggerSheetProps) => {
   const { data: project } = useSelectedProjectQuery()
 
+  const [isClosingPanel, setIsClosingPanel] = useState(false)
   const [showFunctionSelector, setShowFunctionSelector] = useState(false)
 
   const { mutate: createDatabaseTrigger, isLoading: isCreating } = useDatabaseTriggerCreateMutation(
     {
-      onSuccess: (res) => {
-        toast.success(`Successfully created trigger ${res.name}`)
-        setOpen(false)
+      onSuccess: () => {
+        toast.success(`Successfully created trigger`)
+        onClose()
       },
       onError: (error) => {
         toast.error(`Failed to create trigger: ${error.message}`)
@@ -97,9 +105,9 @@ export const TriggerSheet = ({ selectedTrigger, open, setOpen }: TriggerSheetPro
   )
   const { mutate: updateDatabaseTrigger, isLoading: isUpdating } = useDatabaseTriggerUpdateMutation(
     {
-      onSuccess: (res) => {
-        toast.success(`Successfully updated trigger ${res.name}`)
-        setOpen(false)
+      onSuccess: () => {
+        toast.success(`Successfully updated trigger`)
+        onClose()
       },
       onError: (error) => {
         toast.error(`Failed to update trigger: ${error.message}`)
@@ -117,7 +125,7 @@ export const TriggerSheet = ({ selectedTrigger, open, setOpen }: TriggerSheetPro
   const tables = data
     .sort((a, b) => a.schema.localeCompare(b.schema))
     .filter((a) => !protectedSchemas.find((s) => s.name === a.schema))
-  const isEditing = !!selectedTrigger
+  const isEditing = !isDuplicatingTrigger && !!selectedTrigger
 
   const form = useForm<z.infer<typeof FormSchema>>({
     mode: 'onSubmit',
@@ -127,6 +135,10 @@ export const TriggerSheet = ({ selectedTrigger, open, setOpen }: TriggerSheetPro
   })
   const { function_name, function_schema } = form.watch()
 
+  function isClosingSidePanel() {
+    form.formState.isDirty ? setIsClosingPanel(true) : onClose()
+  }
+
   const onSubmit: SubmitHandler<z.infer<typeof FormSchema>> = async (values) => {
     if (!project) return console.error('Project is required')
     const { tableId, ...payload } = values
@@ -151,7 +163,16 @@ export const TriggerSheet = ({ selectedTrigger, open, setOpen }: TriggerSheetPro
     if (open && isSuccess) {
       form.clearErrors()
 
-      if (isEditing) {
+      if (isDuplicatingTrigger && selectedTrigger) {
+        const initalSelectedTable = tables.find((t) => t.name === selectedTrigger.table)
+
+        form.reset({
+          ...selectedTrigger,
+          tableId: initalSelectedTable?.id.toString(),
+          table: initalSelectedTable?.name,
+          schema: initalSelectedTable?.schema,
+        })
+      } else if (isEditing) {
         form.reset(selectedTrigger)
       } else if (tables.length > 0) {
         form.reset({
@@ -167,13 +188,15 @@ export const TriggerSheet = ({ selectedTrigger, open, setOpen }: TriggerSheetPro
 
   return (
     <>
-      <Sheet open={open} onOpenChange={setOpen}>
+      <Sheet open={open} onOpenChange={isClosingSidePanel}>
         <SheetContent size="lg" className="flex flex-col gap-0">
           <SheetHeader>
             <SheetTitle>
-              {isEditing
-                ? `Edit database trigger: ${selectedTrigger.name}`
-                : 'Create a new database trigger'}
+              {isDuplicatingTrigger
+                ? 'Duplicate trigger'
+                : isEditing
+                  ? `Edit database trigger: ${selectedTrigger.name}`
+                  : 'Create a new database trigger'}
             </SheetTitle>
           </SheetHeader>
 
@@ -250,10 +273,12 @@ export const TriggerSheet = ({ selectedTrigger, open, setOpen }: TriggerSheetPro
                           <Select_Shadcn_
                             defaultValue={field.value}
                             onValueChange={(val) => {
+                              // mark table ID as dirty to trigger validation
+                              field.onChange(val)
                               const table = tables.find((x) => x.id.toString() === val)
                               if (table) {
-                                form.setValue('table', table.name)
-                                form.setValue('schema', table.schema)
+                                form.setValue('table', table.name, { shouldDirty: true })
+                                form.setValue('schema', table.schema, { shouldDirty: true })
                               }
                             }}
                           >
@@ -446,14 +471,30 @@ export const TriggerSheet = ({ selectedTrigger, open, setOpen }: TriggerSheetPro
               type="default"
               htmlType="reset"
               disabled={isCreating || isUpdating}
-              onClick={() => setOpen(false)}
+              onClick={onClose}
             >
               Cancel
             </Button>
             <Button form={formId} htmlType="submit" loading={isCreating || isUpdating}>
               {isEditing ? 'Save' : 'Create'} trigger
             </Button>
           </SheetFooter>
+
+          <ConfirmationModal
+            visible={isClosingPanel}
+            title="Discard changes"
+            confirmLabel="Discard"
+            onCancel={() => setIsClosingPanel(false)}
+            onConfirm={() => {
+              setIsClosingPanel(false)
+              onClose()
+            }}
+          >
+            <p className="text-sm text-foreground-light">
+              There are unsaved changes. Are you sure you want to close the panel? Your changes will
+              be lost.
+            </p>
+          </ConfirmationModal>
         </SheetContent>
       </Sheet>
 

apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggerList.tsx

@@ -1,6 +1,6 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { includes, sortBy } from 'lodash'
-import { Check, Edit, Edit2, MoreVertical, Trash, X } from 'lucide-react'
+import { Check, Copy, Edit, Edit2, MoreVertical, Trash, X } from 'lucide-react'
 
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { useDatabaseTriggersQuery } from 'data/database-triggers/database-triggers-query'
@@ -13,6 +13,7 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
   TableCell,
   TableRow,
@@ -21,20 +22,23 @@ import {
   TooltipTrigger,
 } from 'ui'
 import { generateTriggerCreateSQL } from './TriggerList.utils'
+import { PostgresTrigger } from '@supabase/postgres-meta'
 
 interface TriggerListProps {
   schema: string
   filterString: string
   isLocked: boolean
-  editTrigger: (trigger: any) => void
-  deleteTrigger: (trigger: any) => void
+  editTrigger: (trigger: PostgresTrigger) => void
+  duplicateTrigger: (trigger: PostgresTrigger) => void
+  deleteTrigger: (trigger: PostgresTrigger) => void
 }
 
 const TriggerList = ({
   schema,
   filterString,
   isLocked,
   editTrigger,
+  duplicateTrigger,
   deleteTrigger,
 }: TriggerListProps) => {
   const { data: project } = useSelectedProjectQuery()
@@ -197,6 +201,11 @@ const TriggerList = ({
                         <Edit size={14} />
                         <p>Edit with Assistant</p>
                       </DropdownMenuItem>
+                      <DropdownMenuItem className="space-x-2" onClick={() => duplicateTrigger(x)}>
+                        <Copy size={14} />
+                        <p>Duplicate trigger</p>
+                      </DropdownMenuItem>
+                      <DropdownMenuSeparator />
                       <DropdownMenuItem className="space-x-2" onClick={() => deleteTrigger(x)}>
                         <Trash stroke="red" size={14} />
                         <p>Delete trigger</p>

apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggersList.tsx

@@ -37,12 +37,14 @@ import Link from 'next/link'
 interface TriggersListProps {
   createTrigger: () => void
   editTrigger: (trigger: PostgresTrigger) => void
+  duplicateTrigger: (trigger: PostgresTrigger) => void
   deleteTrigger: (trigger: PostgresTrigger) => void
 }
 
 const TriggersList = ({
   createTrigger = noop,
   editTrigger = noop,
+  duplicateTrigger = noop,
   deleteTrigger = noop,
 }: TriggersListProps) => {
   const { data: project } = useSelectedProjectQuery()
@@ -232,6 +234,7 @@ const TriggersList = ({
                   filterString={filterString}
                   isLocked={isSchemaLocked}
                   editTrigger={editTrigger}
+                  duplicateTrigger={duplicateTrigger}
                   deleteTrigger={deleteTrigger}
                 />
               </TableBody>

apps/studio/pages/project/[ref]/database/triggers.tsx

@@ -21,6 +21,8 @@ const TriggersPage: NextPageWithLayout = () => {
   const isInlineEditorEnabled = useIsInlineEditorEnabled()
 
   const [selectedTrigger, setSelectedTrigger] = useState<PostgresTrigger>()
+  const [isDuplicatingTrigger, setIsDuplicatingTrigger] = useState<boolean>(false)
+
   const [showCreateTriggerForm, setShowCreateTriggerForm] = useState<boolean>(false)
   const [showDeleteTriggerForm, setShowDeleteTriggerForm] = useState<boolean>(false)
 
@@ -53,11 +55,34 @@ const TriggersPage: NextPageWithLayout = () => {
     }
   }
 
+  const duplicateTrigger = (trigger: PostgresTrigger) => {
+    setIsDuplicatingTrigger(true)
+
+    const dupTrigger = {
+      ...trigger,
+      name: `${trigger.name}_duplicate`,
+    }
+
+    if (isInlineEditorEnabled) {
+      setSelectedTriggerForEditor(dupTrigger)
+      setEditorPanelOpen(true)
+    } else {
+      setSelectedTrigger(dupTrigger)
+      setShowCreateTriggerForm(true)
+    }
+  }
+
   const deleteTrigger = (trigger: PostgresTrigger) => {
     setSelectedTrigger(trigger)
     setShowDeleteTriggerForm(true)
   }
 
+  const resetEditorPanel = () => {
+    setIsDuplicatingTrigger(false)
+    setEditorPanelOpen(false)
+    setSelectedTriggerForEditor(undefined)
+  }
+
   if (isPermissionsLoaded && !canReadTriggers) {
     return <NoPermission isFullPage resourceText="view database triggers" />
   }
@@ -75,6 +100,7 @@ const TriggersPage: NextPageWithLayout = () => {
             <TriggersList
               createTrigger={createTrigger}
               editTrigger={editTrigger}
+              duplicateTrigger={duplicateTrigger}
               deleteTrigger={deleteTrigger}
             />
           </div>
@@ -83,7 +109,11 @@ const TriggersPage: NextPageWithLayout = () => {
       <TriggerSheet
         selectedTrigger={selectedTrigger}
         open={showCreateTriggerForm}
-        setOpen={setShowCreateTriggerForm}
+        onClose={() => {
+          setIsDuplicatingTrigger(false)
+          setShowCreateTriggerForm(false)
+        }}
+        isDuplicatingTrigger={isDuplicatingTrigger}
       />
       <DeleteTrigger
         trigger={selectedTrigger}
@@ -93,14 +123,8 @@ const TriggersPage: NextPageWithLayout = () => {
 
       <EditorPanel
         open={editorPanelOpen}
-        onRunSuccess={() => {
-          setEditorPanelOpen(false)
-          setSelectedTriggerForEditor(undefined)
-        }}
-        onClose={() => {
-          setEditorPanelOpen(false)
-          setSelectedTriggerForEditor(undefined)
-        }}
+        onRunSuccess={resetEditorPanel}
+        onClose={resetEditorPanel}
         initialValue={
           selectedTriggerForEditor
             ? generateTriggerCreateSQL(selectedTriggerForEditor)
@@ -111,12 +135,16 @@ execute function function_name();`
         }
         label={
           selectedTriggerForEditor
-            ? `Edit trigger "${selectedTriggerForEditor.name}"`
+            ? isDuplicatingTrigger
+              ? `Duplicate trigger "${selectedTriggerForEditor.name}"`
+              : `Edit trigger "${selectedTriggerForEditor.name}"`
             : 'Create new database trigger'
         }
         initialPrompt={
           selectedTriggerForEditor
-            ? `Update the database trigger "${selectedTriggerForEditor.name}" to...`
+            ? isDuplicatingTrigger
+              ? `Duplicate the database trigger "${selectedTriggerForEditor.name}" to...`
+              : `Update the database trigger "${selectedTriggerForEditor.name}" to...`
             : 'Create a new database trigger that...'
         }
       />