Support all deletion actions instead of only cascade delete

joshenlim · joshenlim · commit 8f02734db9e4 · 2023-03-09T16:02:45.000+08:00
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.utils.ts b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.utils.ts
@@ -244,7 +244,7 @@ export const getForeignKeyDeletionAction = (deletionAction?: string) => {
     case FOREIGN_KEY_DELETION_ACTION.SET_DEFAULT:
       return 'Set default'
     case FOREIGN_KEY_DELETION_ACTION.SET_NULL:
-      return 'Set null'
+      return 'Set NULL'
     default:
       return undefined
   }
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnForeignKey.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnForeignKey.tsx
@@ -256,7 +256,9 @@ const ColumnForeignKeyUpdated: FC<{
                     </Badge>
                   )}
                 {updatedDeletionAction !== undefined && (
-                  <Badge color="green">On delete: {updatedDeletionAction}</Badge>
+                  <div>
+                    <Badge color="green">On delete: {updatedDeletionAction}</Badge>
+                  </div>
                 )}
               </div>
             </div>
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.constants.ts b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.constants.ts
@@ -0,0 +1,9 @@
+import { FOREIGN_KEY_DELETION_ACTION } from 'data/database/database-query-constants'
+
+export const FOREIGN_KEY_DELETION_OPTIONS = [
+  { key: 'no-action', label: 'No action', value: FOREIGN_KEY_DELETION_ACTION.NO_ACTION },
+  { key: 'cascade', label: 'Cascade', value: FOREIGN_KEY_DELETION_ACTION.CASCADE },
+  { key: 'restrict', label: 'Restrict', value: FOREIGN_KEY_DELETION_ACTION.RESTRICT },
+  { key: 'set-default', label: 'Set default', value: FOREIGN_KEY_DELETION_ACTION.SET_DEFAULT },
+  { key: 'set-null', label: 'Set NULL', value: FOREIGN_KEY_DELETION_ACTION.SET_NULL },
+]
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx
@@ -10,6 +10,8 @@ import { ForeignKey } from './ForeignKeySelector.types'
 import { ColumnField } from '../SidePanelEditor.types'
 import InformationBox from 'components/ui/InformationBox'
 import { FOREIGN_KEY_DELETION_ACTION } from 'data/database/database-query-constants'
+import { FOREIGN_KEY_DELETION_OPTIONS } from './ForeignKeySelector.constants'
+import { generateDeletionActionDescription } from './ForeignKeySelector.utils'
 
 interface Props {
   column: ColumnField
@@ -21,17 +23,14 @@ interface Props {
   ) => void
 }
 
-// [Joshen] In the future, we can easily extend to other deletion actions as well by replacing
-// enableCascadeDelete with deletionAction
-
 const ForeignKeySelector: FC<Props> = ({ column, visible = false, closePanel, saveChanges }) => {
   const { meta } = useStore()
   const [errors, setErrors] = useState<any>({})
   const [selectedForeignKey, setSelectedForeignKey] = useState<ForeignKey>({
     schema: 'public',
     table: '',
     column: '',
-    enableCascadeDelete: false,
+    deletionAction: FOREIGN_KEY_DELETION_ACTION.NO_ACTION,
   })
 
   const schemas = meta.schemas.list()
@@ -58,22 +57,27 @@ const ForeignKeySelector: FC<Props> = ({ column, visible = false, closePanel, sa
           schema: foreignKey.target_table_schema,
           table: foreignKey.target_table_name,
           column: foreignKey.target_column_name,
-          enableCascadeDelete: foreignKey.deletion_action === FOREIGN_KEY_DELETION_ACTION.CASCADE,
+          deletionAction: foreignKey.deletion_action,
         })
       } else {
         setSelectedForeignKey({
           schema: 'public',
           table: '',
           column: '',
-          enableCascadeDelete: false,
+          deletionAction: FOREIGN_KEY_DELETION_ACTION.NO_ACTION,
         })
       }
     }
   }, [visible])
 
   const updateSelectedSchema = (schema: string) => {
     meta.tables.loadBySchema(schema)
-    const updatedForeignKey = { schema, table: '', column: '', enableCascadeDelete: false }
+    const updatedForeignKey = {
+      schema,
+      table: '',
+      column: '',
+      deletionAction: FOREIGN_KEY_DELETION_ACTION.NO_ACTION,
+    }
     setSelectedForeignKey(updatedForeignKey)
   }
 
@@ -84,7 +88,7 @@ const ForeignKeySelector: FC<Props> = ({ column, visible = false, closePanel, sa
         schema: '',
         table: '',
         column: '',
-        enableCascadeDelete: false,
+        deletionAction: FOREIGN_KEY_DELETION_ACTION.NO_ACTION,
       })
     }
     const table = find(tables, { id: tableId })
@@ -93,7 +97,7 @@ const ForeignKeySelector: FC<Props> = ({ column, visible = false, closePanel, sa
         schema: table.schema,
         table: table.name,
         column: table.columns?.length ? table.columns[0].name : undefined,
-        enableCascadeDelete: false,
+        deletionAction: FOREIGN_KEY_DELETION_ACTION.NO_ACTION,
       })
     }
   }
@@ -107,9 +111,9 @@ const ForeignKeySelector: FC<Props> = ({ column, visible = false, closePanel, sa
     }
   }
 
-  const updateEnableCascadeDelete = (value: boolean) => {
+  const updateDeletionAction = (value: string) => {
     setErrors({})
-    setSelectedForeignKey({ ...selectedForeignKey, enableCascadeDelete: value })
+    setSelectedForeignKey({ ...selectedForeignKey, deletionAction: value })
   }
 
   const onSaveChanges = (resolve: () => void) => {
@@ -129,9 +133,7 @@ const ForeignKeySelector: FC<Props> = ({ column, visible = false, closePanel, sa
         saveChanges({
           table: selectedTable,
           column: selectedColumn,
-          deletionAction: selectedForeignKey.enableCascadeDelete
-            ? FOREIGN_KEY_DELETION_ACTION.CASCADE
-            : FOREIGN_KEY_DELETION_ACTION.NO_ACTION,
+          deletionAction: selectedForeignKey.deletionAction,
         })
       }
     }
@@ -233,7 +235,11 @@ const ForeignKeySelector: FC<Props> = ({ column, visible = false, closePanel, sa
                   disabled
                   label={
                     <div>
-                      Select a column from <code>{selectedForeignKey?.table}</code> to reference to
+                      Select a column from{' '}
+                      <code className="text-xs">
+                        {selectedForeignKey?.schema}.{selectedForeignKey?.table}
+                      </code>{' '}
+                      to reference to
                     </div>
                   }
                   error={errors.column}
@@ -246,7 +252,11 @@ const ForeignKeySelector: FC<Props> = ({ column, visible = false, closePanel, sa
                   // @ts-ignore
                   label={
                     <div>
-                      Select a column from <code>{selectedForeignKey?.table}</code> to reference to
+                      Select a column from{' '}
+                      <code className="text-xs">
+                        {selectedForeignKey?.schema}.{selectedForeignKey?.table}
+                      </code>{' '}
+                      to reference to
                     </div>
                   }
                   error={errors.column}
@@ -262,13 +272,25 @@ const ForeignKeySelector: FC<Props> = ({ column, visible = false, closePanel, sa
                   ))}
                 </Listbox>
               )}
-              <Toggle
-                label="Enable cascade deletes"
+              <SidePanel.Separator />
+              <Listbox
+                id="deletionAction"
+                value={selectedForeignKey.deletionAction}
+                label="Deletion action if referenced row is removed"
                 // @ts-ignore
-                onChange={(value: boolean) => updateEnableCascadeDelete(value)}
-                checked={selectedForeignKey.enableCascadeDelete}
-                descriptionText={`Deleting a record from ${selectedForeignKey.schema}.${selectedForeignKey.table} will also delete the referencing records from this table`}
-              />
+                descriptionText={generateDeletionActionDescription(
+                  selectedForeignKey.deletionAction,
+                  `${selectedForeignKey.schema}.${selectedForeignKey.table}`
+                )}
+                error={errors.column}
+                onChange={(value: string) => updateDeletionAction(value)}
+              >
+                {FOREIGN_KEY_DELETION_OPTIONS.map((option) => (
+                  <Listbox.Option key={option.key} value={option.value} label={option.label}>
+                    <p className="text-scale-1200">{option.label}</p>
+                  </Listbox.Option>
+                ))}
+              </Listbox>
             </>
           )}
         </div>
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.types.ts b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.types.ts
@@ -2,5 +2,5 @@ export interface ForeignKey {
   schema: string
   table: string
   column?: string
-  enableCascadeDelete: boolean
+  deletionAction: string
 }
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.utils.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.utils.tsx
@@ -0,0 +1,46 @@
+import { FOREIGN_KEY_DELETION_ACTION } from 'data/database/database-query-constants'
+
+export const generateDeletionActionDescription = (deletionAction: string, reference: string) => {
+  switch (deletionAction) {
+    case FOREIGN_KEY_DELETION_ACTION.NO_ACTION:
+      return (
+        <>
+          Deleting a record from <code className="text-xs text-scale-1100">{reference}</code> will{' '}
+          <span className="text-brand-900 opacity-75">raise an error</span> if there exists
+          referencing rows from this table
+        </>
+      )
+    case FOREIGN_KEY_DELETION_ACTION.CASCADE:
+      return (
+        <>
+          Deleting a record from <code className="text-xs text-scale-1100">{reference}</code> will{' '}
+          <span className="text-brand-900 opacity-75">also delete</span> the referencing records
+          from this table
+        </>
+      )
+    case FOREIGN_KEY_DELETION_ACTION.RESTRICT:
+      return (
+        <>
+          Deleting a record from <code className="text-xs text-scale-1100">{reference}</code> will{' '}
+          <span className="text-brand-900 opacity-75">raise an error</span> if there exists
+          referencing rows from this table
+        </>
+      )
+    case FOREIGN_KEY_DELETION_ACTION.SET_DEFAULT:
+      return (
+        <>
+          Deleting a record from <code className="text-xs text-scale-1100">{reference}</code> will{' '}
+          set the values of existing referencing rows to their{' '}
+          <span className="text-brand-900 opacity-75">default value</span> from this table
+        </>
+      )
+    case FOREIGN_KEY_DELETION_ACTION.SET_NULL:
+      return (
+        <>
+          Deleting a record from <code className="text-xs text-scale-1100">{reference}</code> will{' '}
+          set the values of existing referencing rows{' '}
+          <span className="text-brand-900 opacity-75">to NULL</span> from this table
+        </>
+      )
+  }
+}
diff --git a/studio/data/database/database-query-constants.ts b/studio/data/database/database-query-constants.ts
@@ -4,7 +4,7 @@ export enum FOREIGN_KEY_DELETION_ACTION {
   NO_ACTION = 'a',
   RESTRICT = 'r',
   CASCADE = 'c',
-  SET_NULL = 's',
+  SET_NULL = 'n',
   SET_DEFAULT = 'd',
 }
 
diff --git a/studio/stores/pgmeta/MetaStore.ts b/studio/stores/pgmeta/MetaStore.ts
@@ -102,7 +102,8 @@ export interface IMetaStore {
     payload: UpdateColumnPayload,
     selectedTable: PostgresTable,
     foreignKey?: ExtendedPostgresRelationship,
-    skipPKCreation?: boolean
+    skipPKCreation?: boolean,
+    skipSuccessMessage?: boolean
   ) => any
   duplicateTable: (
     payload: any,
@@ -460,7 +461,8 @@ export default class MetaStore implements IMetaStore {
     payload: UpdateColumnPayload,
     selectedTable: PostgresTable,
     foreignKey?: ExtendedPostgresRelationship,
-    skipPKCreation?: boolean
+    skipPKCreation?: boolean,
+    skipSuccessMessage: boolean = false
   ) {
     try {
       const { isPrimaryKey, ...formattedPayload } = payload
@@ -489,19 +491,22 @@ export default class MetaStore implements IMetaStore {
 
       // For updating of foreign key relationship, we remove the original one by default
       // Then just add whatever was in foreignKey - simplicity over trying to derive whether to update or not
-      if (!isUndefined(existingForeignKey)) {
+      if (existingForeignKey !== undefined) {
         const relation: any = await this.removeForeignKey(existingForeignKey)
         if (relation.error) throw relation.error
       }
 
-      if (!isUndefined(foreignKey)) {
+      if (foreignKey !== undefined) {
         const relation: any = await this.addForeignKey(foreignKey)
         if (relation.error) throw relation.error
       }
-      this.rootStore.ui.setNotification({
-        category: 'success',
-        message: `Successfully updated column "${column.name}"`,
-      })
+
+      if (!skipSuccessMessage) {
+        this.rootStore.ui.setNotification({
+          category: 'success',
+          message: `Successfully updated column "${column.name}"`,
+        })
+      }
     } catch (error: any) {
       return { error }
     }
@@ -789,12 +794,14 @@ export default class MetaStore implements IMetaStore {
               message: `Updating column ${column.name} from ${updatedTable.name}`,
             })
             const skipPKCreation = true
+            const skipSuccessMessage = true
             const res: any = await this.updateColumn(
               column.id,
               columnPayload,
               updatedTable,
               column.foreignKey,
-              skipPKCreation
+              skipPKCreation,
+              skipSuccessMessage
             )
             if (res?.error) {
               hasError = true

Original file line number	Diff line number	Diff line change
`@@ -244,7 +244,7 @@ export const getForeignKeyDeletionAction = (deletionAction?: string) => {`
`244`	`244`	`case FOREIGN_KEY_DELETION_ACTION.SET_DEFAULT:`
`245`	`245`	`return 'Set default'`
`246`	`246`	`case FOREIGN_KEY_DELETION_ACTION.SET_NULL:`
`247`		`- return 'Set null'`
	`247`	`+ return 'Set NULL'`
`248`	`248`	`default:`
`249`	`249`	`return undefined`
`250`	`250`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2,5 +2,5 @@ export interface ForeignKey {`
`2`	`2`	`schema: string`
`3`	`3`	`table: string`
`4`	`4`	`column?: string`
`5`		`- enableCascadeDelete: boolean`
	`5`	`+ deletionAction: string`
`6`	`6`	`}`
Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@ export enum FOREIGN_KEY_DELETION_ACTION {`
`4`	`4`	`NO_ACTION = 'a',`
`5`	`5`	`RESTRICT = 'r',`
`6`	`6`	`CASCADE = 'c',`
`7`		`- SET_NULL = 's',`
	`7`	`+ SET_NULL = 'n',`
`8`	`8`	`SET_DEFAULT = 'd',`
`9`	`9`	`}`
`10`	`10`