UI Conversion: Switched ButtonGroup to Radio

Summary: Switched button group to Ant's radio buttons

Reviewed By: mweststrate

Differential Revision: D28068173

fbshipit-source-id: bcde8f32d76f76c18cf8bc8c8742bc3e01c54c7c

desktop/plugins/public/databases/ButtonNavigation.tsx

@@ -7,8 +7,9 @@
  * @format
  */
 
-import {Button, ButtonGroup, Glyph, colors} from 'flipper';
+import {Radio} from 'antd';
 import React from 'react';
+import {LeftOutlined, RightOutlined} from '@ant-design/icons';
 
 export default React.memo(
   (props: {
@@ -22,30 +23,14 @@ export default React.memo(
     onForward: () => void;
   }) => {
     return (
-      <ButtonGroup>
+      <Radio.Group style={{marginLeft: 5, marginRight: 5}}>
-        <Button disabled={!props.canGoBack} onClick={props.onBack}>
+        <Radio.Button disabled={!props.canGoBack} onClick={props.onBack}>
-          <Glyph
+          <LeftOutlined size={16} />
-            name="chevron-left"
+        </Radio.Button>
-            size={16}
+        <Radio.Button disabled={!props.canGoForward} onClick={props.onForward}>
-            color={
+          <RightOutlined size={16} />
-              props.canGoBack
+        </Radio.Button>
-                ? colors.macOSTitleBarIconActive
+      </Radio.Group>
-                : colors.macOSTitleBarIconBlur
-            }
-          />
-        </Button>
-        <Button disabled={!props.canGoForward} onClick={props.onForward}>
-          <Glyph
-            name="chevron-right"
-            size={16}
-            color={
-              props.canGoForward
-                ? colors.macOSTitleBarIconActive
-                : colors.macOSTitleBarIconBlur
-            }
-          />
-        </Button>
-      </ButtonGroup>
     );
   },
 );

desktop/plugins/public/databases/index.tsx

@@ -48,7 +48,14 @@ import {
   Layout,
   useMemoize,
 } from 'flipper-plugin';
-import {Select} from 'antd';
+import {Select, Radio, RadioChangeEvent, Typography} from 'antd';
+import {
+  ConsoleSqlOutlined,
+  DatabaseOutlined,
+  HistoryOutlined,
+  SettingOutlined,
+  TableOutlined,
+} from '@ant-design/icons';
 
 const {Option} = Select;
 
@@ -822,6 +829,13 @@ export function Component() {
   const instance = usePlugin(plugin);
   const state = useValue(instance.state);
 
+  const onViewModeChanged = useCallback(
+    (evt: RadioChangeEvent) => {
+      instance.updateViewMode({viewMode: evt.target.value ?? 'data'});
+    },
+    [instance],
+  );
+
   const onDataClicked = useCallback(() => {
     instance.updateViewMode({viewMode: 'data'});
   }, [instance]);
@@ -1090,39 +1104,28 @@ export function Component() {
   return (
     <Layout.Container grow>
       <Toolbar position="top" style={{paddingLeft: 16}}>
-        <ButtonGroup>
+        <Radio.Group value={state.viewMode} onChange={onViewModeChanged}>
-          <Button
+          <Radio.Button value="data" onClick={onDataClicked}>
-            icon={'data-table'}
+            <TableOutlined style={{marginRight: 5}} />
-            onClick={onDataClicked}
+            <Typography.Text>Data</Typography.Text>
-            selected={state.viewMode === 'data'}>
+          </Radio.Button>
-            Data
+          <Radio.Button onClick={onStructureClicked} value="structure">
-          </Button>
+            <SettingOutlined style={{marginRight: 5}} />
-          <Button
+            <Typography.Text>Structure</Typography.Text>
-            icon={'gears-two'}
+          </Radio.Button>
-            onClick={onStructureClicked}
+          <Radio.Button onClick={onSQLClicked} value="SQL">
-            selected={state.viewMode === 'structure'}>
+            <ConsoleSqlOutlined style={{marginRight: 5}} />
-            Structure
+            <Typography.Text>SQL</Typography.Text>
-          </Button>
+          </Radio.Button>
-          <Button
+          <Radio.Button onClick={onTableInfoClicked} value="tableInfo">
-            icon={'magnifying-glass'}
+            <DatabaseOutlined style={{marginRight: 5}} />
-            onClick={onSQLClicked}
+            <Typography.Text>Table Info</Typography.Text>
-            selected={state.viewMode === 'SQL'}>
+          </Radio.Button>
-            SQL
+          <Radio.Button onClick={onQueryHistoryClicked} value="queryHistory">
-          </Button>
+            <HistoryOutlined style={{marginRight: 5}} />
-          <Button
+            <Typography.Text>Query History</Typography.Text>
-            icon={'info-cursive'}
+          </Radio.Button>
-            onClick={onTableInfoClicked}
+        </Radio.Group>
-            selected={state.viewMode === 'tableInfo'}>
-            Table Info
-          </Button>
-          <Button
-            icon={'on-this-day'}
-            iconSize={12}
-            onClick={onQueryHistoryClicked}
-            selected={state.viewMode === 'queryHistory'}>
-            Query History
-          </Button>
-        </ButtonGroup>
       </Toolbar>
       {state.viewMode === 'data' ||
       state.viewMode === 'structure' ||