Remove checkbox as boolean value

Summary:
Remove checkbox as we currently don't support editing values.

Instead replace with a simple 'TRUE', 'FALSE' text.

Reviewed By: antonk52

Differential Revision: D41532898

fbshipit-source-id: d4af37e30eb21ab761c39cb4ae45337247c80c9d

desktop/plugins/public/ui-debugger/components/sidebar/inspector/AttributesInspector.tsx

@@ -16,7 +16,7 @@ import {
   UINode,
 } from '../../../types';
 import {DataInspector, Panel, styled} from 'flipper-plugin';
-import {Checkbox, Col, Row} from 'antd';
+import {Col, Row} from 'antd';
 import {displayableName} from '../utilities/displayableName';
 import ColorInspector from './ColorInspector';
 import SizeInspector from './SizeInspector';
@@ -26,6 +26,7 @@ import Coordinate3DInspector from './Coordinate3DInspector';
 import CoordinateInspector from './CoordinateInspector';
 import {
   AutoMarginStyle,
+  BooleanAttributeValueStyle,
   EnumAttributeValueStyle,
   NumberAttributeValueStyle,
   ObjectContainerStyle,
@@ -36,6 +37,7 @@ import {Glyph} from 'flipper';
 import {transform} from '../../../dataTransform';
 
 const NumberValue = styled.span(NumberAttributeValueStyle);
+const BooleanValue = styled.span(BooleanAttributeValueStyle);
 const TextValue = styled.span(TextAttributeValueStyle);
 const EnumValue = styled.span(EnumAttributeValueStyle);
 const ObjectContainer = styled.div(ObjectContainerStyle);
@@ -98,7 +100,7 @@ function create(
     case 'boolean':
       return (
         <NamedAttributeInspector name={displayableName(name)}>
-          <Checkbox checked={inspectable.value} disabled />
+          <BooleanValue>{inspectable.value ? 'TRUE' : 'FALSE'}</BooleanValue>
         </NamedAttributeInspector>
       );
     case 'enum':

desktop/plugins/public/ui-debugger/components/sidebar/inspector/Styles.tsx

@@ -55,6 +55,12 @@ export const NumberAttributeValueStyle = {
   display: 'flex',
 } as const;
 
+export const BooleanAttributeValueStyle = {
+  color: theme.semanticColors.booleanValue,
+  fontSize: theme.fontSize.small,
+  alignItems: 'center',
+} as const;
+
 export const TextAttributeValueStyle = {
   color: theme.semanticColors.stringValue,
   display: 'flex',