From aa5ef66568bfc971474224cd49e4918bbccfafe1 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Thu, 14 Sep 2023 18:02:08 +0800
Subject: [PATCH] Init cascade update

---
 .../ForeignKeySelector.constants.ts           |  2 +-
 .../ForeignKeySelector/ForeignKeySelector.tsx | 27 +++++++++++++++++--
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.constants.ts b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.constants.ts
index 6cfa9b617ca..17f218bce48 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.constants.ts
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.constants.ts
@@ -1,6 +1,6 @@
 import { FOREIGN_KEY_CASCADE_ACTION } from 'data/database/database-query-constants'
 
-export const FOREIGN_KEY_DELETION_OPTIONS = [
+export const FOREIGN_KEY_CASCADE_OPTIONS = [
   { key: 'no-action', label: 'No action', value: FOREIGN_KEY_CASCADE_ACTION.NO_ACTION },
   { key: 'cascade', label: 'Cascade', value: FOREIGN_KEY_CASCADE_ACTION.CASCADE },
   { key: 'restrict', label: 'Restrict', value: FOREIGN_KEY_CASCADE_ACTION.RESTRICT },
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx
index fd5421646fb..12e141860ed 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx
@@ -19,7 +19,7 @@ import { FOREIGN_KEY_CASCADE_ACTION } from 'data/database/database-query-constan
 import { useStore } from 'hooks'
 import ActionBar from '../ActionBar'
 import { ColumnField } from '../SidePanelEditor.types'
-import { FOREIGN_KEY_DELETION_OPTIONS } from './ForeignKeySelector.constants'
+import { FOREIGN_KEY_CASCADE_OPTIONS } from './ForeignKeySelector.constants'
 import { ForeignKey } from './ForeignKeySelector.types'
 import { generateDeletionActionDescription } from './ForeignKeySelector.utils'
 
@@ -360,6 +360,29 @@ const ForeignKeySelector = ({
                 url="https://www.postgresql.org/docs/current/ddl-constraints.html#DDL-CONSTRAINTS-FK"
                 urlLabel="More information"
               />
+
+              <Listbox
+                id="updateAction"
+                value={selectedForeignKey.deletionAction}
+                label="Action if referenced row is updated"
+                descriptionText={
+                  <p>
+                    {generateDeletionActionDescription(
+                      selectedForeignKey.deletionAction,
+                      `${selectedForeignKey.schema}.${selectedForeignKey.table}`
+                    )}
+                  </p>
+                }
+                error={errors.column}
+                onChange={(value: string) => updateDeletionAction(value)}
+              >
+                {FOREIGN_KEY_CASCADE_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>
+
               <Listbox
                 id="deletionAction"
                 value={selectedForeignKey.deletionAction}
@@ -387,7 +410,7 @@ const ForeignKeySelector = ({
                 error={errors.column}
                 onChange={(value: string) => updateDeletionAction(value)}
               >
-                {FOREIGN_KEY_DELETION_OPTIONS.map((option) => (
+                {FOREIGN_KEY_CASCADE_OPTIONS.map((option) => (
                   <Listbox.Option key={option.key} value={option.value} label={option.label}>
                     <p className="text-scale-1200">{option.label}</p>
                   </Listbox.Option>