Update boolean selector in grid

studio/components/grid/components/editor/BooleanEditor.tsx

@@ -1,25 +1,46 @@
-import * as React from 'react'
+import { Select } from 'ui'
 import { EditorProps } from '@supabase/react-data-grid'
-import { Toggle } from 'ui'
+import { useTrackedState } from 'components/grid/store'
+
+interface Props<TRow, TSummaryRow = unknown> extends EditorProps<TRow, TSummaryRow> {
+  isNullable?: boolean
+}
 
 export function BooleanEditor<TRow, TSummaryRow = unknown>({
   row,
   column,
+  isNullable,
   onRowChange,
   onClose,
-}: EditorProps<TRow, TSummaryRow>) {
-  const onBlur = () => onClose(true)
-  const onChange = (value: boolean) => onRowChange({ ...row, [column.key]: value })
+}: Props<TRow, TSummaryRow>) {
+  const state = useTrackedState()
+  const gridColumn = state.gridColumns.find((x) => x.name == column.key)
+  const value = row[column.key as keyof TRow] as unknown as string
+
+  const onBlur = () => onClose(false)
+  const onChange = (event: any) => {
+    const value = event.target.value
+    if (value === 'null') {
+      onRowChange({ ...row, [column.key]: null }, true)
+    } else {
+      onRowChange({ ...row, [column.key]: value === 'true' }, true)
+    }
+  }
 
   return (
-    <div className="sb-grid-checkbox-editor flex items-center">
-      <Toggle
-        // @ts-ignore
-        onChange={onChange}
-        onBlur={onBlur}
-        checked={row[column.key as keyof TRow] as unknown as boolean}
-        className="mx-auto translate-y-[1px]"
-      />
-    </div>
+    <Select
+      autoFocus
+      id="boolean-editor"
+      name="boolean-editor"
+      size="small"
+      onBlur={onBlur}
+      onChange={onChange}
+      defaultValue={value === null ? 'null' : value.toString()}
+      style={{ width: `${gridColumn?.width || column.width}px` }}
+    >
+      <Select.Option value="true">TRUE</Select.Option>
+      <Select.Option value="false">FALSE</Select.Option>
+      {isNullable && <Select.Option value="null">NULL</Select.Option>}
+    </Select>
   )
 }

studio/components/grid/components/editor/NullableBooleanEditor.tsx

@@ -1,58 +0,0 @@
-import React, { useEffect } from 'react'
-import * as Tooltip from '@radix-ui/react-tooltip'
-import { EditorProps } from '@supabase/react-data-grid'
-import { Toggle, Button, IconX } from 'ui'
-
-export function NullableBooleanEditor<TRow, TSummaryRow = unknown>({
-  row,
-  column,
-  onRowChange,
-  onClose,
-}: EditorProps<TRow, TSummaryRow>) {
-  const value = row[column.key as keyof TRow] as unknown as boolean | null
-
-  useEffect(() => {
-    // if value is null, set it to false on initial render
-    if (value === null) {
-      onRowChange({ ...row, [column.key]: false })
-    }
-  }, [])
-
-  const onBlur = () => onClose(true)
-  const onClear = () => onRowChange({ ...row, [column.key]: null }, true)
-  const onChange = (value: boolean) => onRowChange({ ...row, [column.key]: value })
-
-  return (
-    <div className="sb-grid-checkbox-editor flex items-center">
-      <Toggle
-        // @ts-ignore
-        onChange={onChange}
-        onBlur={onBlur}
-        checked={row[column.key as keyof TRow] as unknown as boolean}
-        className="mx-auto translate-y-[1px]"
-      />
-      <Tooltip.Root delayDuration={0}>
-        <Tooltip.Trigger className="flex items-center">
-          <Button
-            type="text"
-            title="Set to NULL"
-            icon={<IconX size="tiny" strokeWidth={2} />}
-            className="px-1 mr-2"
-            onClick={onClear}
-          />
-        </Tooltip.Trigger>
-        <Tooltip.Content side="bottom">
-          <Tooltip.Arrow className="radix-tooltip-arrow" />
-          <div
-            className={[
-              'rounded bg-scale-100 py-1 px-2 leading-none shadow',
-              'border border-scale-200',
-            ].join(' ')}
-          >
-            <span className="text-xs text-scale-1200">Set to NULL</span>
-          </div>
-        </Tooltip.Content>
-      </Tooltip.Root>
-    </div>
-  )
-}

studio/components/grid/components/editor/index.ts

@@ -2,7 +2,6 @@ export * from './BooleanEditor'
 export * from './DateEditor'
 export * from './DateTimeEditor'
 export * from './JsonEditor'
-export * from './NullableBooleanEditor'
 export * from './NumberEditor'
 export * from './SelectEditor'
 export * from './TextEditor'

studio/components/grid/utils/gridColumns.tsx

@@ -19,7 +19,6 @@ import {
   DateTimeEditor,
   DateTimeWithTimezoneEditor,
   JsonEditor,
-  NullableBooleanEditor,
   NumberEditor,
   SelectEditor,
   TextEditor,
@@ -105,7 +104,7 @@ function getColumnEditor(
 
   switch (columnType) {
     case 'boolean': {
-      return columnDefinition.isNullable ? NullableBooleanEditor : BooleanEditor
+      return (p: any) => <BooleanEditor {...p} isNullable={columnDefinition.isNullable} />
     }
     case 'date': {
       return DateEditor