fix: use string not object in LemonSelect (#17774)

PostHog · Oct 24, 2023 · af1b008 · af1b008
1 parent 85b4b30
commit af1b008
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 17 deletions.
diff --git a/frontend/src/scenes/data-management/database/DatabaseTables.tsx b/frontend/src/scenes/data-management/database/DatabaseTables.tsx
@@ -13,7 +13,7 @@ import { FEATURE_FLAGS } from 'lib/constants'
 
 export function DatabaseTablesContainer(): JSX.Element {
     const { filteredTables, databaseLoading } = useValues(databaseSceneLogic)
-    const { toggleFieldModal, selectTable } = useActions(viewLinkLogic)
+    const { toggleFieldModal, selectTableName } = useActions(viewLinkLogic)
     const { featureFlags } = useValues(featureFlagLogic)
 
     return (
@@ -33,7 +33,7 @@ export function DatabaseTablesContainer(): JSX.Element {
                                             className="mt-2"
                                             type="primary"
                                             onClick={() => {
-                                                selectTable(row)
+                                                selectTableName(row.name)
                                                 toggleFieldModal()
                                             }}
                                         >

diff --git a/frontend/src/scenes/data-management/database/databaseSceneLogic.ts b/frontend/src/scenes/data-management/database/databaseSceneLogic.ts
@@ -49,7 +49,7 @@ export const databaseSceneLogic = kea<databaseSceneLogicType>([
             (s) => [s.filteredTables],
             (filteredTables: DatabaseSceneRow[]) =>
                 filteredTables.map((row) => ({
-                    value: row,
+                    value: row.name,
                     label: row.name,
                 })),
         ],

diff --git a/frontend/src/scenes/data-warehouse/ViewLinkModal.tsx b/frontend/src/scenes/data-warehouse/ViewLinkModal.tsx
@@ -6,7 +6,6 @@ import { viewLinkLogic } from 'scenes/data-warehouse/viewLinkLogic'
 import { Form, Field } from 'kea-forms'
 import { useActions, useValues } from 'kea'
 import { DatabaseSchemaQueryResponseField } from '~/queries/schema'
-import { databaseSceneLogic } from 'scenes/data-management/database/databaseSceneLogic'
 
 export function ViewLinkModal({ tableSelectable }: { tableSelectable: boolean }): JSX.Element {
     const { isFieldModalOpen } = useValues(viewLinkLogic)
@@ -35,9 +34,9 @@ interface ViewLinkFormProps {
 }
 
 export function ViewLinkForm({ tableSelectable }: ViewLinkFormProps): JSX.Element {
-    const { viewOptions, toJoinKeyOptions, selectedView, selectedTable, fromJoinKeyOptions } = useValues(viewLinkLogic)
-    const { selectView, toggleFieldModal, selectTable } = useActions(viewLinkLogic)
-    const { tableOptions } = useValues(databaseSceneLogic)
+    const { viewOptions, tableOptions, toJoinKeyOptions, selectedView, selectedTableName, fromJoinKeyOptions } =
+        useValues(viewLinkLogic)
+    const { selectView, toggleFieldModal, selectTableName } = useActions(viewLinkLogic)
 
     return (
         <Form logic={viewLinkLogic} formKey="viewLink" enableFormOnSubmit>
@@ -47,16 +46,15 @@ export function ViewLinkForm({ tableSelectable }: ViewLinkFormProps): JSX.Elemen
                         <span className="l4">Table</span>
                         {tableSelectable ? (
                             <LemonSelect
-                                value={selectedTable}
+                                value={selectedTableName}
                                 fullWidth
+                                allowClear
                                 options={tableOptions}
-                                onSelect={selectTable}
+                                onSelect={selectTableName}
                                 placeholder="Select a table"
                             />
-                        ) : selectedTable ? (
-                            selectedTable.name
                         ) : (
-                            ''
+                            selectedTableName ?? ''
                         )}
                     </div>
                     <div className="w-50">

diff --git a/frontend/src/scenes/data-warehouse/viewLinkLogic.tsx b/frontend/src/scenes/data-warehouse/viewLinkLogic.tsx
@@ -26,13 +26,13 @@ export interface KeySelectOption {
 export const viewLinkLogic = kea<viewLinkLogicType>([
     path(['scenes', 'data-warehouse', 'viewLinkLogic']),
     connect({
-        values: [dataWarehouseSavedQueriesLogic, ['savedQueries']],
+        values: [dataWarehouseSavedQueriesLogic, ['savedQueries'], databaseSceneLogic, ['tableOptions']],
         actions: [databaseSceneLogic, ['loadDatabase']],
     }),
     actions({
         selectView: (selectedView) => ({ selectedView }),
         setView: (view) => ({ view }),
-        selectTable: (selectedTable) => ({ selectedTable }),
+        selectTableName: (selectedTableName: string) => ({ selectedTableName }),
         toggleFieldModal: true,
         saveViewLink: (viewLink) => ({ viewLink }),
         deleteViewLink: (table, column) => ({ table, column }),
@@ -53,10 +53,10 @@ export const viewLinkLogic = kea<viewLinkLogicType>([
                 setView: (_, { view }) => view,
             },
         ],
-        selectedTable: [
-            null as DataWarehouseSceneRow | null,
+        selectedTableName: [
+            null as string | null,
             {
-                selectTable: (_, { selectedTable }) => selectedTable,
+                selectTableName: (_, { selectedTableName }) => selectedTableName,
             },
         ],
         isFieldModalOpen: [
@@ -132,6 +132,11 @@ export const viewLinkLogic = kea<viewLinkLogicType>([
         },
     })),
     selectors({
+        selectedTable: [
+            (s) => [s.selectedTableName, s.tableOptions],
+            (selectedTableName: string, tableOptions: DataWarehouseSceneRow[]) =>
+                tableOptions.find((row) => row.name === selectedTableName),
+        ],
         viewOptions: [
             (s) => [s.savedQueries],
             (savedQueries: DataWarehouseSceneRow[]) =>