dbeaver/pro#5752 add boolean component to metadata editor (#3754)

* dbeaver/pro#5752 add boolean component to metadata editor

* dbeaver/pro#5752 fix linter

---------

Co-authored-by: Daria Marutkina <125263541+dariamarutkina@users.noreply.github.com>

webapp/packages/plugin-object-viewer/package.json

@@ -40,6 +40,7 @@
     "@cloudbeaver/plugin-navigation-tabs": "workspace:*",
     "@cloudbeaver/plugin-navigation-tree": "workspace:*",
     "@dbeaver/js-helpers": "workspace:^",
+    "@dbeaver/ui-kit": "workspace:^",
     "mobx": "^6",
     "mobx-react-lite": "^4",
     "react": "^19",

webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/Table.module.css

@@ -30,3 +30,21 @@
   composes: theme-background-surface theme-text-on-surface theme-border-color-background from global;
   border-top: 1px solid;
 }
+
+.boolean {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &[data-disabled] {
+    opacity: 1;
+  }
+}
+
+@layer components {
+  .boolean {
+    composes: checkbox-markup-theme--tertiary from global;
+    --dbv-kit-checkbox-border-width: 1px;
+    --dbv-kit-checkbox-check-size: 0.8;
+  }
+}

webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/Table.tsx

@@ -14,7 +14,8 @@ import { useService } from '@cloudbeaver/core-di';
 import { type DBObject, NavTreeResource } from '@cloudbeaver/core-navigation-tree';
 import { useTabLocalState } from '@cloudbeaver/core-ui';
 import { DataGrid, useCreateGridReactiveValue } from '@cloudbeaver/plugin-data-grid';
-import { getObjectPropertyDisplayValue } from '@cloudbeaver/core-sdk';
+import { getObjectPropertyDisplayValue, getObjectPropertyType, getObjectPropertyValue } from '@cloudbeaver/core-sdk';
+import { Checkbox } from '@dbeaver/ui-kit';
 
 import { ObjectPropertyTableFooter } from '../ObjectPropertyTableFooter.js';
 import classes from './Table.module.css';
@@ -76,7 +77,19 @@ export const Table = observer<TableProps>(function Table({ objects, hasNextPage,
     }
 
     const property = objects[rowIdx]?.object?.properties?.[colIdx];
-    return property ? getObjectPropertyDisplayValue(property) : '';
+
+    if (property) {
+      const type = getObjectPropertyType(property);
+
+      if (type === 'checkbox') {
+        const value = getObjectPropertyValue(property);
+        return <Checkbox className={s(styles, { boolean: true })} size="small" checked={value} disabled />;
+      }
+
+      return getObjectPropertyDisplayValue(property);
+    }
+
+    return '';
   }
   const cell = useCreateGridReactiveValue(getCell, (onValueChange, rowIdx, colIdx) => reaction(() => getCell(rowIdx, colIdx), onValueChange), [
     objects,

webapp/packages/plugin-object-viewer/tsconfig.json

@@ -7,6 +7,9 @@
     "composite": true
   },
   "references": [
+    {
+      "path": "../../common-react/@dbeaver/ui-kit"
+    },
     {
       "path": "../../common-typescript/@dbeaver/js-helpers"
     },

webapp/yarn.lock

@@ -3374,6 +3374,7 @@ __metadata:
     "@cloudbeaver/plugin-navigation-tree": "workspace:*"
     "@cloudbeaver/tsconfig": "workspace:*"
     "@dbeaver/js-helpers": "workspace:^"
+    "@dbeaver/ui-kit": "workspace:^"
     "@types/react": "npm:^19"
     mobx: "npm:^6"
     mobx-react-lite: "npm:^4"