fix(studio): show correct column error on composite foreign keys (#41320)

* fix(studio): show correct column error on composite foreign keys

* remove duplicate line

apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx

@@ -25,7 +25,7 @@ import { ActionBar } from '../ActionBar'
 import { NUMERICAL_TYPES, TEXT_TYPES } from '../SidePanelEditor.constants'
 import type { ColumnField } from '../SidePanelEditor.types'
 import { FOREIGN_KEY_CASCADE_OPTIONS } from './ForeignKeySelector.constants'
-import type { ForeignKey } from './ForeignKeySelector.types'
+import type { ForeignKey, SelectorErrors, SelectorTypeError } from './ForeignKeySelector.types'
 import { generateCascadeActionDescription } from './ForeignKeySelector.utils'
 
 const EMPTY_STATE: ForeignKey = {
@@ -62,9 +62,9 @@ export const ForeignKeySelector = ({
   const { selectedSchema } = useQuerySchemaState()
 
   const [fk, setFk] = useState(EMPTY_STATE)
-  const [errors, setErrors] = useState<{ columns?: string; types?: any[]; typeNotice?: any[] }>({})
-  const hasTypeErrors = (errors?.types ?? []).filter((x: any) => x !== undefined).length > 0
-  const hasTypeNotices = (errors?.typeNotice ?? []).filter((x: any) => x !== undefined).length > 0
+  const [errors, setErrors] = useState<SelectorErrors>({})
+  const hasTypeErrors = (errors.types ?? []).length > 0
+  const hasTypeNotices = (errors.typeNotice ?? []).length > 0
 
   const { data: schemas } = useSchemasQuery({
     projectRef: project?.ref,
@@ -146,7 +146,7 @@ export const ForeignKeySelector = ({
   }
 
   const validateSelection = (resolve: any) => {
-    const errors: any = {}
+    const errors: SelectorErrors = {}
     const incompleteColumns = fk.columns.filter(
       (column) => column.source === '' || column.target === ''
     )
@@ -164,8 +164,8 @@ export const ForeignKeySelector = ({
   }
 
   const validateType = () => {
-    const typeNotice: any = []
-    const typeErrors: any = []
+    const typeNotice: SelectorTypeError[] = []
+    const typeErrors: SelectorTypeError[] = []
 
     fk.columns.forEach((column) => {
       const { source, target, sourceType: sType, targetType: tType } = column
@@ -182,7 +182,6 @@ export const ForeignKeySelector = ({
       if (
         (NUMERICAL_TYPES.includes(sourceType) && NUMERICAL_TYPES.includes(targetType)) ||
         (TEXT_TYPES.includes(sourceType) && TEXT_TYPES.includes(targetType)) ||
-        (TEXT_TYPES.includes(sourceType) && TEXT_TYPES.includes(targetType)) ||
         (sourceType === 'uuid' && targetType === 'uuid')
       )
         return
@@ -191,10 +190,10 @@ export const ForeignKeySelector = ({
       if (sourceType === targetType) return
 
       if (sourceColumn?.isNewColumn && targetType !== '') {
-        return typeNotice.push({ sourceType, targetType })
+        return typeNotice.push({ source, sourceType, target, targetType })
       }
 
-      typeErrors.push({ sourceType, targetType })
+      typeErrors.push({ source, sourceType, target, targetType })
     })
 
     setErrors({ types: typeErrors, typeNotice })
@@ -420,9 +419,8 @@ export const ForeignKeySelector = ({
                             if (x === undefined) return null
                             return (
                               <li key={`type-error-${idx}`}>
-                                <code className="text-code-inline">{fk.columns[idx]?.source}</code>{' '}
-                                ({x.sourceType}) and{' '}
-                                <code className="text-code-inline">{fk.columns[idx]?.target}</code>(
+                                <code className="text-code-inline">{x.source}</code> ({x.sourceType}
+                                ) and <code className="text-code-inline">{x.target}</code>(
                                 {x.targetType})
                               </li>
                             )
@@ -443,9 +441,7 @@ export const ForeignKeySelector = ({
                             return (
                               <li key={`type-error-${idx}`}>
                                 <div className="flex items-center gap-x-1">
-                                  <code className="text-code-inline">
-                                    {fk.columns[idx]?.source}
-                                  </code>{' '}
+                                  <code className="text-code-inline">{x.source}</code>{' '}
                                   <ArrowRight size={14} /> {x.targetType}
                                 </div>
                               </li>

apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.types.ts

@@ -10,3 +10,16 @@ export interface ForeignKey {
   updateAction: string
   toRemove?: boolean
 }
+
+export interface SelectorErrors {
+  columns?: string
+  types?: SelectorTypeError[]
+  typeNotice?: SelectorTypeError[]
+}
+
+export interface SelectorTypeError {
+  source: string
+  sourceType: string
+  target: string
+  targetType: string
+}