dbeaver/pro#5440 feat: display boolean as checkbox in grid (#3372)

* dbeaver/pro#5440 feat: display boolean as checkbox in grid

* #5440 refactor: make checkboxes disabled inside grid

It's a very strange UX when checkbox is inside a cell of a table and behaves like a real one. It's much more expected when only cell takes focus and checkbox only represents the value in a way we want without acting like a real input. Moreover, using Focusable component enables smooth toggling between all 3 states of a boolean cell from a keyboard.

* #5440 fix: remove inline padding

* #5440 feat: add hover effect for boolean formatter

* #5440 refactor: revert full width

* #5440 refactor: split onClick and onKeyDown interfaces

* #5440 fix: return onClick

---------

Co-authored-by: Andrey Sychev <nukemoore@gmail.com>
Co-authored-by: Evgenia <139753579+EvgeniaBzzz@users.noreply.github.com>

common-react/@dbeaver/react-data-grid/src/formatters/BooleanFormatter.tsx

@@ -1,15 +1,27 @@
 import { NullFormatter } from './NullFormatter.js';
-import { Checkbox } from '@dbeaver/ui-kit';
+import { Checkbox, clsx, Focusable } from '@dbeaver/ui-kit';
 
 interface Props {
   value: boolean | null;
   className?: string;
   onClick?: React.MouseEventHandler<HTMLElement>;
+  onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
 }
 
-export function BooleanFormatter({ value, className, onClick }: Props) {
-  if (value === null) {
-    return <NullFormatter className={className} onClick={onClick} />;
-  }
-  return <Checkbox size="small" checked={value} className={className} onClick={onClick} />;
+export function BooleanFormatter({ value, className, onClick, onKeyDown }: Props) {
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
+    if (event.code === 'Enter' || event.code === 'Space') {
+      event.preventDefault();
+      onKeyDown?.(event);
+    }
+  };
+  return (
+    <Focusable
+      className={clsx('tw:flex tw:items-center tw:outline-none tw:hover:cursor-pointer', className)}
+      onKeyDown={handleKeyDown}
+      onClick={onClick}
+    >
+      {value === null ? <NullFormatter /> : <Checkbox className="tw:data-disabled:opacity-100" disabled size="small" checked={value} />}
+    </Focusable>
+  );
 }

common-react/@dbeaver/react-data-grid/src/formatters/NullFormatter.module.css

@@ -1,12 +0,0 @@
-/*
- * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2024 DBeaver Corp and others
- *
- * Licensed under the Apache License, Version 2.0.
- * you may not use this file except in compliance with the License.
- */
-
- .nullValue {
-  text-transform: uppercase;
-  opacity: 0.65;
-}

common-react/@dbeaver/react-data-grid/src/formatters/NullFormatter.tsx

@@ -1,4 +1,3 @@
-import styles from './NullFormatter.module.css';
 import { clsx } from '@dbeaver/ui-kit';
 
 interface Props {
@@ -8,7 +7,7 @@ interface Props {
 
 export function NullFormatter({ className, onClick }: Props) {
   return (
-    <span className={clsx(styles['nullValue'], className)} onClick={onClick}>
+    <span className={clsx('tw:uppercase', 'tw:opacity-65', className)} onClick={onClick}>
       [NULL]
     </span>
   );