UI Conversion: Replace buttons and dropdowns to antd analogues

Summary: Replaced favorite query dropdown to antd analogue

Reviewed By: mweststrate

Differential Revision: D28089366

fbshipit-source-id: 0d6e01bf6169f100ba7c9e612f0da8240ca3218d

desktop/plugins/public/databases/DatabaseDetailSidebar.tsx

@@ -16,12 +16,13 @@ import {
   Value,
   valueToNullableString,
   renderValue,
-  Button,
   styled,
   produce,
   colors,
 } from 'flipper';
 
+import {Button} from 'antd';
+
 type TableRow = {
   col: string;
   type: Value['type'];

desktop/plugins/public/databases/index.tsx

@@ -13,12 +13,9 @@ import {
   Toolbar,
   ManagedTable,
   Text,
-  Button,
-  ButtonGroup,
   Input,
   colors,
   getStringFromErrorLike,
-  Spacer,
   Textarea,
   TableBodyColumn,
   TableRows,
@@ -48,18 +45,30 @@ import {
   Layout,
   useMemoize,
 } from 'flipper-plugin';
-import {Select, Radio, RadioChangeEvent, Typography} from 'antd';
+import {
+  Select,
+  Radio,
+  RadioChangeEvent,
+  Typography,
+  Button,
+  Menu,
+  Dropdown,
+} from 'antd';
 import {
   ConsoleSqlOutlined,
   DatabaseOutlined,
+  DownOutlined,
   HistoryOutlined,
   SettingOutlined,
+  StarFilled,
+  StarOutlined,
   TableOutlined,
 } from '@ant-design/icons';
 
 const {Option} = Select;
 
 const PAGE_SIZE = 50;
+const FAVORITES_LOCAL_STORAGE_KEY = 'plugin-database-favorites-sql-queries';
 
 const BoldSpan = styled.span({
   fontSize: 12,
@@ -97,7 +106,6 @@ type DatabasesPluginState = {
   currentSort: TableRowSortOrder | null;
   query: Query | null;
   queryResult: QueryResult | null;
-  favorites: Array<string>;
   executionTime: number;
   tableInfo: string;
   queryHistory: Array<Query>;
@@ -174,11 +182,12 @@ const QueryHistory = React.memo(({history}: {history: Array<Query>}) => {
   };
   const rows: TableRows = [];
   if (history.length > 0) {
-    for (const query of history) {
+    for (let i = 0; i < history.length; i++) {
+      const query = history[i];
       const time = query.time;
       const value = query.value;
       rows.push({
-        key: value,
+        key: `${i}`,
         columns: {time: {value: time}, query: {value: value}},
       });
     }
@@ -387,6 +396,29 @@ const QueryTable = React.memo(
   },
 );
 
+const FavoritesMenu = React.memo(
+  ({
+    favorites,
+    onClick,
+  }: {
+    favorites: string[];
+    onClick: (value: string) => void;
+  }) => {
+    const onMenuClick = useCallback((p: any) => onClick(p.key as string), [
+      onClick,
+    ]);
+    return (
+      <Menu>
+        {favorites.map((q) => (
+          <Menu.Item key={q} onClick={onMenuClick}>
+            {q}
+          </Menu.Item>
+        ))}
+      </Menu>
+    );
+  },
+);
+
 export function plugin(client: PluginClient<Events, Methods>) {
   const pluginState = createState<DatabasesPluginState>({
     selectedDatabase: 0,
@@ -401,12 +433,19 @@ export function plugin(client: PluginClient<Events, Methods>) {
     currentSort: null,
     query: null,
     queryResult: null,
-    favorites: [],
     executionTime: 0,
     tableInfo: '',
     queryHistory: [],
   });
 
+  const favoritesState = createState<string[]>([], {persist: 'favorites'});
+  favoritesState.subscribe((favorites) => {
+    localStorage.setItem(
+      FAVORITES_LOCAL_STORAGE_KEY,
+      JSON.stringify(favorites),
+    );
+  });
+
   const updateDatabases = (event: {
     databases: Array<{name: string; id: number; tables: Array<string>}>;
   }) => {
@@ -632,23 +671,15 @@ export function plugin(client: PluginClient<Events, Methods>) {
     });
   };
 
-  const updateFavorites = (event: {favorites: Array<string> | undefined}) => {
+  const addOrRemoveQueryToFavorites = (query: string) => {
-    const state = pluginState.get();
+    favoritesState.update((favorites) => {
-    const newFavorites = [...(event.favorites || state.favorites)];
+      const index = favorites.indexOf(query);
-    if (state.query) {
-      const value = state.query.value;
-      const index = newFavorites.indexOf(value);
       if (index < 0) {
-        newFavorites.push(value);
+        favorites.push(query);
       } else {
-        newFavorites.splice(index, 1);
+        favorites.splice(index, 1);
       }
-    }
+    });
-    pluginState.set({...state, favorites: newFavorites});
-    window.localStorage.setItem(
-      'plugin-database-favorites-sql-queries',
-      JSON.stringify(newFavorites),
-    );
   };
 
   const sortByChanged = (event: {sortOrder: TableRowSortOrder}) => {
@@ -793,15 +824,21 @@ export function plugin(client: PluginClient<Events, Methods>) {
         databases,
       });
     });
-    updateFavorites({
+    const loadedFavoritesJson = localStorage.getItem(
-      favorites: JSON.parse(
+      FAVORITES_LOCAL_STORAGE_KEY,
-        localStorage.getItem('plugin-database-favorites-sql-queries') || '[]',
+    );
-      ),
+    if (loadedFavoritesJson) {
-    });
+      try {
+        favoritesState.set(JSON.parse(loadedFavoritesJson));
+      } catch (err) {
+        console.error('Failed to load favorite queries from local storage');
+      }
+    }
   });
 
   return {
     state: pluginState,
+    favoritesState,
     updateDatabases,
     updateSelectedDatabase,
     updateSelectedDatabaseTable,
@@ -817,7 +854,7 @@ export function plugin(client: PluginClient<Events, Methods>) {
     execute,
     goToRow,
     refresh,
-    updateFavorites,
+    addOrRemoveQueryToFavorites,
     sortByChanged,
     updateQuery,
     pageHighlightedRowsChanged,
@@ -828,6 +865,7 @@ export function plugin(client: PluginClient<Events, Methods>) {
 export function Component() {
   const instance = usePlugin(plugin);
   const state = useValue(instance.state);
+  const favorites = useValue(instance.favoritesState);
 
   const onViewModeChanged = useCallback(
     (evt: RadioChangeEvent) => {
@@ -863,11 +901,11 @@ export function Component() {
     instance.refresh();
   }, [instance]);
 
-  const onFavoritesClicked = useCallback(() => {
+  const onFavoriteButtonClicked = useCallback(() => {
-    instance.updateFavorites({
+    if (state.query) {
-      favorites: instance.state.get().favorites,
+      instance.addOrRemoveQueryToFavorites(state.query.value);
-    });
+    }
-  }, [instance]);
+  }, [instance, state.query]);
 
   const onDatabaseSelected = useCallback(
     (selected: string) => {
@@ -933,6 +971,15 @@ export function Component() {
     [instance],
   );
 
+  const onFavoriteQuerySelected = useCallback(
+    (query: string) => {
+      instance.updateQuery({
+        value: query,
+      });
+    },
+    [instance],
+  );
+
   const pageHighlightedRowsChanged = useCallback(
     (rows: TableHighlightedRows) => {
       instance.pageHighlightedRowsChanged(rows);
@@ -1186,48 +1233,36 @@ export function Component() {
           <Toolbar
             position="top"
             style={{paddingLeft: 16, paddingTop: 24, paddingBottom: 24}}>
-            <ButtonGroup>
+            <Layout.Right>
+              <Layout.Horizontal gap>
                 <Button
-                icon={'star'}
+                  icon={
-                iconSize={12}
+                    state.query && favorites.includes(state.query.value) ? (
-                iconVariant={
+                      <StarFilled />
-                  state.query !== null &&
+                    ) : (
-                  typeof state.query !== 'undefined' &&
+                      <StarOutlined />
-                  state.favorites.includes(state.query.value)
+                    )
-                    ? 'filled'
-                    : 'outline'
                   }
-                onClick={onFavoritesClicked}
+                  onClick={onFavoriteButtonClicked}
                 />
-              {state.favorites !== null ? (
+                <Dropdown
-                <Button
+                  overlay={
-                  dropdown={state.favorites.map((option) => {
+                    <FavoritesMenu
-                    return {
+                      favorites={favorites}
-                      click: () => {
+                      onClick={onFavoriteQuerySelected}
-                        instance.state.set({
+                    />
-                          ...instance.state.get(),
+                  }>
-                          query: {
+                  <Button onClick={() => {}}>
-                            value: option,
+                    Choose from previous queries <DownOutlined />
-                            time: dateFormat(new Date(), 'hh:MM:ss'),
-                          },
-                        });
-                        onQueryChanged;
-                      },
-                      label: option,
-                    };
-                  })}>
-                  Choose from previous queries
                   </Button>
-              ) : null}
+                </Dropdown>
-            </ButtonGroup>
+              </Layout.Horizontal>
-            <Spacer />
-            <ButtonGroup>
               <Button
                 onClick={onExecuteClicked}
                 title={'Execute SQL [Ctrl+Return]'}>
                 Execute
               </Button>
-            </ButtonGroup>
+            </Layout.Right>
           </Toolbar>
         </div>
       ) : null}