From efbf7cb0d2963a104bdbdf72c2197d164560e9bb Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Fri, 10 Mar 2023 17:12:24 +0800
Subject: [PATCH] Update UI support for boolean to null in grid

---
 .../grid/components/editor/BooleanEditor.tsx  | 21 +++----
 .../editor/NullableBooleanEditor.tsx          | 57 +++++++++++--------
 .../components/formatter/BooleanFormatter.tsx |  2 +-
 .../components/grid/components/grid/Grid.tsx  |  1 -
 4 files changed, 41 insertions(+), 40 deletions(-)

diff --git a/studio/components/grid/components/editor/BooleanEditor.tsx b/studio/components/grid/components/editor/BooleanEditor.tsx
index 8505b5a5901..3396d2a1d55 100644
--- a/studio/components/grid/components/editor/BooleanEditor.tsx
+++ b/studio/components/grid/components/editor/BooleanEditor.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { EditorProps } from '@supabase/react-data-grid'
+import { Toggle } from 'ui'
 
 export function BooleanEditor<TRow, TSummaryRow = unknown>({
   row,
@@ -7,23 +8,17 @@ export function BooleanEditor<TRow, TSummaryRow = unknown>({
   onRowChange,
   onClose,
 }: EditorProps<TRow, TSummaryRow>) {
-  function onChange(event: React.ChangeEvent<HTMLInputElement>) {
-    onRowChange({ ...row, [column.key]: event.target.checked })
-  }
-
-  function onBlur() {
-    onClose(true)
-  }
+  const onBlur = () => onClose(true)
+  const onChange = (value: boolean) => onRowChange({ ...row, [column.key]: value })
 
   return (
-    <div className="sb-grid-checkbox-editor">
-      <input
-        className="sb-grid-checkbox-editor__input"
-        checked={row[column.key as keyof TRow] as unknown as boolean}
+    <div className="sb-grid-checkbox-editor flex items-center">
+      <Toggle
+        // @ts-ignore
         onChange={onChange}
         onBlur={onBlur}
-        type="checkbox"
-        style={{ margin: 'auto' }}
+        checked={row[column.key as keyof TRow] as unknown as boolean}
+        className="mx-auto translate-y-[1px]"
       />
     </div>
   )
diff --git a/studio/components/grid/components/editor/NullableBooleanEditor.tsx b/studio/components/grid/components/editor/NullableBooleanEditor.tsx
index 22996cf1dc6..5b8bac0ddef 100644
--- a/studio/components/grid/components/editor/NullableBooleanEditor.tsx
+++ b/studio/components/grid/components/editor/NullableBooleanEditor.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react'
+import * as Tooltip from '@radix-ui/react-tooltip'
 import { EditorProps } from '@supabase/react-data-grid'
-import { Button, IconX } from 'ui'
+import { Toggle, Button, IconX } from 'ui'
 
 export function NullableBooleanEditor<TRow, TSummaryRow = unknown>({
   row,
@@ -17,35 +18,41 @@ export function NullableBooleanEditor<TRow, TSummaryRow = unknown>({
     }
   }, [])
 
-  function onChange(event: React.ChangeEvent<HTMLInputElement>) {
-    onRowChange({ ...row, [column.key]: event.target.checked })
-  }
-
-  function onBlur() {
-    onClose(true)
-  }
-
-  function onClear() {
-    onRowChange({ ...row, [column.key]: null }, true)
-  }
+  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">
-      <input
-        className="sb-grid-checkbox-editor__input"
-        checked={value === null ? false : value}
+    <div className="sb-grid-checkbox-editor flex items-center">
+      <Toggle
+        // @ts-ignore
         onChange={onChange}
         onBlur={onBlur}
-        type="checkbox"
-        style={{ margin: 'auto' }}
-      />
-      <Button
-        type="text"
-        title="Clear"
-        icon={<IconX size="tiny" strokeWidth={2} />}
-        onClick={onClear}
-        style={{ padding: '3px', margin: 'auto 5px auto auto' }}
+        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>
   )
 }
diff --git a/studio/components/grid/components/formatter/BooleanFormatter.tsx b/studio/components/grid/components/formatter/BooleanFormatter.tsx
index a038fdda957..9255bd8c77b 100644
--- a/studio/components/grid/components/formatter/BooleanFormatter.tsx
+++ b/studio/components/grid/components/formatter/BooleanFormatter.tsx
@@ -6,5 +6,5 @@ import { NullValue } from '../common'
 export const BooleanFormatter = (p: React.PropsWithChildren<FormatterProps<SupaRow, unknown>>) => {
   const value = p.row[p.column.key] as boolean | null
   if (value === null) return <NullValue />
-  return <>{value ? 'true' : 'false'}</>
+  return <>{value ? 'TRUE' : 'FALSE'}</>
 }
diff --git a/studio/components/grid/components/grid/Grid.tsx b/studio/components/grid/components/grid/Grid.tsx
index a5194aa0c9f..ff4c3e09d9e 100644
--- a/studio/components/grid/components/grid/Grid.tsx
+++ b/studio/components/grid/components/grid/Grid.tsx
@@ -6,7 +6,6 @@ import { GridProps, SupaRow } from '../../types'
 import { useDispatch, useTrackedState } from '../../store'
 import RowRenderer from './RowRenderer'
 import AwesomeDebouncePromise from 'awesome-debounce-promise'
-import { useTableRowUpdateMutation } from 'data/table-rows/table-row-update-mutation'
 
 function rowKeyGetter(row: SupaRow) {
   return row?.idx ?? -1