Enforce react/jsx-boolean-value

Summary: yarn fix results.

Reviewed By: nikoant

Differential Revision: D28329714

fbshipit-source-id: 564aa24bcdb4bc6cdea67dfad10a077a9c817a2d

desktop/app/src/chrome/RatingButton.tsx

@@ -223,7 +223,7 @@ class FeedbackComponent extends Component<
               onKeyDown={(e) =>
                 e.key == 'Enter' && this.onCommentSubmitted(this.state.comment)
               }
-              autoFocus={true}
+              autoFocus
             />
           </Row>,
           <Row key="contactCheckbox">

desktop/app/src/chrome/SettingsSheet.tsx

@@ -191,7 +191,7 @@ class SettingsSheet extends Component<Props, State> {
             <FilePathConfigField
               label="IDB binary location"
               defaultValue={idbPath}
-              isRegularFile={true}
+              isRegularFile
               onChange={(v) => {
                 this.setState({
                   updatedSettings: {...this.state.updatedSettings, idbPath: v},

desktop/app/src/chrome/ShareSheetErrorList.tsx

@@ -48,7 +48,7 @@ export default class Popover extends PureComponent<Props> {
       return null;
     }
     return (
-      <VBox scrollable={true} maxHeight={300}>
+      <VBox scrollable maxHeight={300}>
         <Info type={this.props.type}>
           <Title bold>{this.props.title}</Title>
           {this.props.errors.map((e: Error, index) => (

desktop/app/src/chrome/VideoRecordingButton.tsx

@@ -81,7 +81,7 @@ export default class VideoRecordingButton extends Component<Props, State> {
     const {selectedDevice} = this.props;
     return (
       <Button
-        compact={true}
+        compact
         onClick={this.onRecordingClicked}
         pulse={this.state.recording}
         selected={this.state.recording}

desktop/app/src/chrome/plugin-manager/PluginInstaller.tsx

@@ -147,7 +147,7 @@ const PluginInstaller = function ({
         <ManagedTable_immutable
           rowLineHeight={28}
           floating={false}
-          multiline={true}
+          multiline
           columnSizes={columnSizes}
           columns={columns}
           highlightableRows={false}

desktop/app/src/chrome/plugin-manager/__tests__/PluginInstaller.node.tsx

@@ -82,7 +82,7 @@ test('load PluginInstaller list', async () => {
         // Bit ugly to have this as an effectively test-only option, but
         // without, we rely on height information from Electron which we don't
         // have, causing no items to be rendered.
-        autoHeight={true}
+        autoHeight
       />
     </Provider>
   );
@@ -106,7 +106,7 @@ test('load PluginInstaller list with one plugin installed', async () => {
         // Bit ugly to have this as an effectively test-only option, but
         // without, we rely on height information from Electron which we don't
         // have, causing no items to be rendered.
-        autoHeight={true}
+        autoHeight
       />
     </Provider>
   );

desktop/app/src/createTablePlugin.tsx

@@ -198,18 +198,18 @@ export function createTablePlugin<T extends RowData>(props: Props<T>) {
       const {columns, columnSizes} = props;
       const {rows} = this.props.persistedState;
       return (
-        <FlexColumn grow={true}>
+        <FlexColumn grow>
           <SearchableTable_immutable
             key={this.constructor.id}
             rowLineHeight={28}
             floating={false}
-            multiline={true}
+            multiline
             columnSizes={columnSizes}
             columns={columns}
             onRowHighlighted={this.onRowHighlighted}
-            multiHighlight={true}
+            multiHighlight
             rows={rows}
-            stickyBottom={true}
+            stickyBottom
             actions={<Button onClick={this.clear}>Clear Table</Button>}
           />
           <DetailSidebar>{this.renderSidebar()}</DetailSidebar>

desktop/app/src/plugins/TableNativePlugin.tsx

@@ -124,7 +124,7 @@ function renderValue({type, value}: {type: string; value: any}) {
   switch (type) {
     case 'boolean':
       return (
-        <BooleanValue code={true} active={value}>
+        <BooleanValue code active={value}>
           {value.toString()}
         </BooleanValue>
       );
@@ -232,7 +232,7 @@ function renderSidebarSection(
     case 'json':
       return (
         <Panel floating={false} heading={section.title} key={index}>
-          <DataInspector data={section.content} expandRoot={true} />
+          <DataInspector data={section.content} expandRoot />
         </Panel>
       );
     case 'toolbar':
@@ -240,7 +240,7 @@ function renderSidebarSection(
     default:
       return (
         <Panel floating={false} heading={'Details'} key={index}>
-          <DataInspector data={section} expandRoot={true} />
+          <DataInspector data={section} expandRoot />
         </Panel>
       );
   }
@@ -480,20 +480,20 @@ export default function createTableNativePlugin(id: string, title: string) {
         : null;
 
       return (
-        <FlexColumn grow={true}>
+        <FlexColumn grow>
           {topToolbarComponent}
           <SearchableTable
             key={this.constructor.id}
             rowLineHeight={28}
             floating={false}
-            multiline={true}
+            multiline
             columnSizes={columnSizes}
             columnOrder={columnOrder}
             columns={columns}
             onRowHighlighted={this.onRowHighlighted}
-            multiHighlight={true}
+            multiHighlight
             rows={this.applyMetadataToRows(rows)}
-            stickyBottom={true}
+            stickyBottom
             actions={<Button onClick={this.clear}>Clear Table</Button>}
           />
           <DetailSidebar>{this.renderSidebar()}</DetailSidebar>

desktop/app/src/ui/components/ButtonGroup.tsx

@@ -36,7 +36,7 @@ export const ButtonGroupContext = createContext(false);
  */
 export default function ButtonGroup({children}: {children: React.ReactNode}) {
   return (
-    <ButtonGroupContext.Provider value={true}>
+    <ButtonGroupContext.Provider value>
       <Space>{children}</Space>
     </ButtonGroupContext.Provider>
   );

desktop/app/src/ui/components/ButtonGroupChain.tsx

@@ -72,7 +72,7 @@ type Props = {
  */
 export default function ButtonGroupChain({children, iconSize, icon}: Props) {
   return (
-    <ButtonGroupContext.Provider value={true}>
+    <ButtonGroupContext.Provider value>
       <ButtonGroupChainContainer iconSize={iconSize}>
         {React.Children.map(children, (child, idx) => {
           if (idx === 0) {

desktop/app/src/ui/components/ErrorBoundary.tsx

@@ -76,7 +76,7 @@ export default class ErrorBoundary extends Component<
       }
 
       return (
-        <ErrorBoundaryContainer grow={true}>
+        <ErrorBoundaryContainer grow>
           <Heading>{heading}</Heading>
           {this.props.showStack !== false && (
             <ErrorBoundaryStack error={error} />

desktop/app/src/ui/components/FileSelector.tsx

@@ -91,7 +91,7 @@ export default function FileSelector({
       <FileInputBox
         placeholder={placeholderText}
         value={value}
-        isValid={true}
+        isValid
         onDrop={(e) => {
           if (e.dataTransfer.files.length) {
             onChange(e.dataTransfer.files[0].path);

desktop/app/src/ui/components/StackTrace.tsx

@@ -188,7 +188,7 @@ export default class StackTrace extends Component<{
           <ManagedTable
             columns={columns}
             rows={rows}
-            hideHeader={true}
+            hideHeader
             autoHeight
             zebra={false}
             columnOrder={columnOrder}

desktop/app/src/ui/components/Tabs.tsx

@@ -315,7 +315,7 @@ export default function Tabs(props: {
   }
 
   return (
-    <FlexColumn grow={true}>
+    <FlexColumn grow>
       <TabList>
         {before}
         {tabList}

desktop/app/src/ui/components/TabsContainer.tsx

@@ -26,7 +26,7 @@ export const TabsContext = React.createContext(true);
 export default function TabsContainer(props: {children: any}) {
   return (
     <Container>
-      <TabsContext.Provider value={true}>{props.children}</TabsContext.Provider>
+      <TabsContext.Provider value>{props.children}</TabsContext.Provider>
     </Container>
   );
 }

desktop/app/src/ui/components/VirtualList.tsx

@@ -133,11 +133,7 @@ export default class VirtualList extends Component<
     }
 
     return (
-      <View
+      <View grow onScroll={this.handleScroll} ref={this.setRef} scrollable>
-        grow={true}
-        onScroll={this.handleScroll}
-        ref={this.setRef}
-        scrollable={true}>
         {inner}
       </View>
     );

desktop/app/src/ui/components/elements-inspector/sidebar.tsx

@@ -66,8 +66,8 @@ class InspectorSidebarSection extends Component<InspectorSidebarSectionProps> {
           data={this.props.data}
           setValue={this.props.onValueChanged ? this.setValue : undefined}
           extractValue={this.extractValue}
-          expandRoot={true}
+          expandRoot
-          collapsed={true}
+          collapsed
           tooltips={this.props.tooltips}
         />
       </Panel>

desktop/app/src/ui/components/table/TableHead.tsx

@@ -178,7 +178,7 @@ class TableHeadColumn extends PureComponent<{
     if (isResizable) {
       children = (
         <TableHeaderColumnInteractive
-          grow={true}
+          grow
           resizable={RIGHT_RESIZABLE}
           onResize={this.onResize}
           minWidth={20}>

desktop/flipper-plugin/src/ui/data-inspector/__tests__/DataInspector.node.tsx

@@ -32,7 +32,7 @@ test('changing collapsed property works', async () => {
   res.rerender(<DataInspector data={json} collapsed={false} expandRoot />);
   await res.findByText(/cool/);
 
-  res.rerender(<DataInspector data={json} collapsed={true} expandRoot />);
+  res.rerender(<DataInspector data={json} collapsed expandRoot />);
   expect(res.queryAllByText(/cool/).length).toBe(0);
 });
 

desktop/flipper-plugin/src/ui/data-table/TableHead.tsx

@@ -210,7 +210,7 @@ function TableHeadColumn({
   if (isResizable) {
     children = (
       <TableHeaderColumnInteractive
-        grow={true}
+        grow
         resizable={RIGHT_RESIZABLE}
         onResize={onResize}
         minWidth={20}>

desktop/plugins/public/cpu/TemperatureTable.tsx

@@ -62,14 +62,14 @@ export default class TemperatureTable extends Component<TemperatureTableProps> {
   render() {
     return (
       <SearchableTable
-        multiline={true}
+        multiline
-        autoHeight={true}
+        autoHeight
         floating={false}
-        zebra={true}
+        zebra
         columnSizes={ColumnSizes}
         columns={Columns}
         rows={this.buildRows()}
-        grow={true}
+        grow
       />
     );
   }

desktop/plugins/public/databases/DatabaseDetailSidebar.tsx

@@ -81,9 +81,7 @@ function buildSidebarRow(key: string, val: Value): TableRow {
       var parsed = JSON.parse(val.value);
     } catch (_error) {}
     if (parsed) {
-      output = (
+      output = <ManagedDataInspector data={parsed} expandRoot collapsed />;
-        <ManagedDataInspector data={parsed} expandRoot={true} collapsed />
-      );
     }
   }
   return {
@@ -186,7 +184,7 @@ export default React.memo(function DatabaseDetailSidebar(
   );
   return (
     <DetailSidebar>
-      <Panel title="Row details" collapsible={true}>
+      <Panel title="Row details" collapsible>
         {onSave ? (
           <Layout.Right>
             <div />

desktop/plugins/public/databases/DatabasesPlugin.tsx

@@ -131,9 +131,9 @@ const QueryHistory = React.memo(({history}: {history: Array<Query>}) => {
         floating={false}
         columns={columns}
         columnSizes={{time: 75}}
-        zebra={true}
+        zebra
         rows={rows}
-        horizontallyScrollable={true}
+        horizontallyScrollable
       />
     </Layout.Horizontal>
   );
@@ -232,12 +232,12 @@ const DataTable = React.memo(
               }),
             {},
           )}
-          zebra={true}
+          zebra
           rows={page.rows.map((row: Array<Value>, index: number) =>
             transformRow(page.columns, row, index),
           )}
-          horizontallyScrollable={true}
+          horizontallyScrollable
-          multiHighlight={true}
+          multiHighlight
           onRowHighlighted={highlightedRowsChanged}
           onSort={sortOrderChanged}
           initialSortOrder={currentSort ?? undefined}
@@ -281,7 +281,7 @@ const QueryTable = React.memo(
         <Layout.Horizontal grow>
           <ManagedTable
             floating={false}
-            multiline={true}
+            multiline
             columnOrder={columns.map((name) => ({
               key: name,
               visible: true,
@@ -291,11 +291,11 @@ const QueryTable = React.memo(
                 Object.assign({}, acc, {[val]: {value: val, resizable: true}}),
               {},
             )}
-            zebra={true}
+            zebra
             rows={rows.map((row: Array<Value>, index: number) =>
               transformRow(columns, row, index),
             )}
-            horizontallyScrollable={true}
+            horizontallyScrollable
             onRowHighlighted={highlightedRowsChanged}
           />
           {table.highlightedRows.length === 1 && (

desktop/plugins/public/fresco/ImagesCacheOverview.tsx

@@ -191,7 +191,7 @@ export default class ImagesCacheOverview extends PureComponent<
 
     return (
       <ImagesCacheOverview.Container
-        grow={true}
+        grow
         onKeyDown={this.onKeyDown}
         tabIndex={0}>
         <Toolbar position="top">

desktop/plugins/public/fresco/ImagesSidebar.tsx

@@ -100,10 +100,7 @@ class EventDetails extends Component<{
     const {event} = this.props;
 
     return (
-      <Panel
+      <Panel heading={<RequestHeader event={event} />} floating={false} padded>
-        heading={<RequestHeader event={event} />}
-        floating={false}
-        padded={true}>
         <p>
           <DataDescriptionKey>Attribution</DataDescriptionKey>
           <span key="sep">: </span>

desktop/plugins/public/fresco/index.tsx

@@ -115,15 +115,14 @@ export function plugin(client: PluginClient<Events, Methods>) {
         message: (
           <Fragment>
             <InlineFlexRow>
-              CloseableReference leaked for{' '}
+              CloseableReference leaked for <Text code>{event.className}</Text>
-              <Text code={true}>{event.className}</Text>
               (identity hashcode: {event.identityHashCode}).
             </InlineFlexRow>
             <InlineFlexRow>
-              <Text bold={true}>Stacktrace:</Text>
+              <Text bold>Stacktrace:</Text>
             </InlineFlexRow>
             <InlineFlexRow>
-              <Text code={true}>{event.stacktrace || '<unavailable>'}</Text>
+              <Text code>{event.stacktrace || '<unavailable>'}</Text>
             </InlineFlexRow>
           </Fragment>
         ),
@@ -466,7 +465,7 @@ function Sidebar() {
 
   if (currentSelectedImage == null) {
     return (
-      <EmptySidebar grow={true}>
+      <EmptySidebar grow>
         <Text align="center">
           Select an image to see the events associated with it.
         </Text>

desktop/plugins/public/kaios-allocations/index.tsx

@@ -390,7 +390,7 @@ export default class AllocationsPlugin extends FlipperDevicePlugin<
           heading="Page allocations"
           floating={false}
           collapsable={false}
-          grow={true}>
+          grow>
           <Toolbar position="top">
             <Select
               options={appTitlesForSelect}
@@ -429,11 +429,11 @@ export default class AllocationsPlugin extends FlipperDevicePlugin<
             {(this.state.totalAllocatedBytes / 1024 / 1024).toFixed(3)}
           </Label>
           <ManagedTable
-            multiline={true}
+            multiline
             columnSizes={ColumnSizes}
             columns={Columns}
             floating={false}
-            zebra={true}
+            zebra
             rows={this.buildMemRows()}
           />
         </Panel>

desktop/plugins/public/kaios-ram/index.tsx

@@ -244,7 +244,7 @@ export default class KaiOSGraphs extends FlipperDevicePlugin<State, any, any> {
         heading="Free memory"
         floating={false}
         collapsable={false}
-        grow={true}>
+        grow>
         <Toolbar position="top">
           {this.state.monitoring ? (
             <Button onClick={this.onStopMonitor} icon="pause">
@@ -256,7 +256,7 @@ export default class KaiOSGraphs extends FlipperDevicePlugin<State, any, any> {
             </Button>
           )}
         </Toolbar>
-        <FlexColumn grow={true}>
+        <FlexColumn grow>
           <ResponsiveContainer height={500}>
             <LineChart data={pointsToDraw}>
               <XAxis type="number" domain={[0, MAX_POINTS]} dataKey="idx" />

desktop/plugins/public/layout/InspectorSidebar.tsx

@@ -69,8 +69,8 @@ class InspectorSidebarSection extends PureComponent<InspectorSidebarSectionProps
           data={this.props.data}
           setValue={this.props.onValueChanged ? this.setValue : undefined}
           extractValue={this.extractValue}
-          expandRoot={true}
+          expandRoot
-          collapsed={true}
+          collapsed
           tooltips={this.props.tooltips}
         />
       </Panel>

desktop/plugins/public/layout/index.tsx

@@ -448,7 +448,7 @@ export default class LayoutPlugin extends FlipperPlugin<
         <Inspector
           {...inspectorProps}
           onSelect={(selectedAXElement) => this.setState({selectedAXElement})}
-          showsSidebar={true}
+          showsSidebar
           ax
         />
       </Sidebar>
@@ -533,7 +533,7 @@ export default class LayoutPlugin extends FlipperPlugin<
           element.decoration === 'litho' ? (
             <Button
               icon={'share-external'}
-              compact={true}
+              compact
               style={{marginTop: 8, marginRight: 12}}
               onClick={() => {
                 this.props.selectPlugin('YogaPerformance', element!.id);

desktop/plugins/public/leak_canary/index.tsx

@@ -192,7 +192,7 @@ export default class LeakCanary<PersistedState> extends FlipperPlugin<
           <Panel heading={'Instance'} floating={false} grow={false}>
             <ManagedDataInspector
               data={instanceFields}
-              expandRoot={true}
+              expandRoot
               extractValue={this._extractValue}
             />
           </Panel>
@@ -201,7 +201,7 @@ export default class LeakCanary<PersistedState> extends FlipperPlugin<
           <Panel heading={'Static'} floating={false} grow={false}>
             <ManagedDataInspector
               data={staticFields}
-              expandRoot={true}
+              expandRoot
               extractValue={this._extractValue}
             />
           </Panel>
@@ -221,8 +221,8 @@ export default class LeakCanary<PersistedState> extends FlipperPlugin<
 
     return (
       <Window>
-        <FlexColumn grow={true}>
+        <FlexColumn grow>
-          <FlexColumn grow={true} scrollable={true}>
+          <FlexColumn grow scrollable>
             {this.state.leaks.map((leak: Leak, idx: number) => {
               const elements = showFullClassPaths
                 ? leak.elements

desktop/plugins/public/navigation/components/FavoriteButton.tsx

@@ -39,12 +39,7 @@ export default (props: Props) => {
           {...iconButtonProps}
         />
       ) : null}
-      <IconButton
+      <IconButton outline icon="star" onClick={onClick} {...iconButtonProps} />
-        outline={true}
-        icon="star"
-        onClick={onClick}
-        {...iconButtonProps}
-      />
     </FavoriteButtonContainer>
   );
 };

desktop/plugins/public/navigation/components/SearchBar.tsx

@@ -143,7 +143,7 @@ class SearchBar extends Component<Props, State> {
               <IconButton
                 icon="send"
                 size={16}
-                outline={true}
+                outline
                 onClick={() => this.navigateTo(searchInputValue)}
               />
               <FavoriteButton

desktop/plugins/public/network/RequestDetails.tsx

@@ -390,7 +390,7 @@ class VideoFormatter {
     if (contentType.startsWith('video/')) {
       return (
         <Layout.Container center>
-          <VideoFormatter.Video controls={true}>
+          <VideoFormatter.Video controls>
             <source src={request.url} type={contentType} />
           </VideoFormatter.Video>
         </Layout.Container>

desktop/plugins/public/network/index.tsx

@@ -515,7 +515,7 @@ export function Component() {
   return (
     <NetworkRouteContext.Provider value={networkRouteManager}>
       <Layout.Container
-        grow={true}
+        grow
         key={
           columns.length /* make sure to reset the table if colums change */
         }>

desktop/plugins/public/seamammals/src/index.tsx

@@ -105,7 +105,7 @@ function renderSidebar(row: Row) {
   return (
     <Layout.Container gap pad>
       <Typography.Title level={4}>Extras</Typography.Title>
-      <ManagedDataInspector data={row} expandRoot={true} />
+      <ManagedDataInspector data={row} expandRoot />
     </Layout.Container>
   );
 }

desktop/plugins/public/shared_preferences/src/index.tsx

@@ -166,7 +166,7 @@ export function Component() {
   }
 
   return (
-    <RootColumn grow={true}>
+    <RootColumn grow>
       <Heading>
         <span style={{marginRight: '16px'}}>Preference File</span>
         <Select
@@ -180,7 +180,7 @@ export function Component() {
           onChange={instance.setSelectedPreferences}
         />
       </Heading>
-      <FlexRow grow={true} scrollable={true}>
+      <FlexRow grow scrollable>
         <InspectorColumn>
           <Heading>Inspector</Heading>
           <ManagedDataInspector