From a47528a726e2ed30a44e43cbddd74cb9159062ce Mon Sep 17 00:00:00 2001
From: Feiyu Wong <feiyuwong@fb.com>
Date: Wed, 27 Jul 2022 12:19:51 -0700
Subject: [PATCH] Icon in search bar to show/hide search results

Summary:
1. Added icon to search bar to manually trigger the hide/show search context/results functionality, which was only triggerable by ctrl(now migrated to ctrl+t) before.
2. Added tool tips to increase visibility of keyboard shortcuts

Changelog: Added icon for showing search result context(only triggered by keyboard shortcut before). Added tool tips to search bar icons.

Reviewed By: mweststrate

Differential Revision: D38207087

fbshipit-source-id: a34c1322294ed8091ea3f90d2f1f206af981c9ca
---
 .../src/ui/data-table/TableSearch.tsx         | 33 ++++++++++++++-----
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/desktop/flipper-plugin/src/ui/data-table/TableSearch.tsx b/desktop/flipper-plugin/src/ui/data-table/TableSearch.tsx
index 256b88455..87be96063 100644
--- a/desktop/flipper-plugin/src/ui/data-table/TableSearch.tsx
+++ b/desktop/flipper-plugin/src/ui/data-table/TableSearch.tsx
@@ -7,8 +7,8 @@
  * @format
  */
 
-import {HistoryOutlined, MenuOutlined} from '@ant-design/icons';
-import {Button, Dropdown, Input, AutoComplete, InputRef} from 'antd';
+import {HistoryOutlined, MenuOutlined, SwapOutlined} from '@ant-design/icons';
+import {Button, Dropdown, Input, AutoComplete, InputRef, Tooltip} from 'antd';
 import React, {memo, useCallback, useMemo} from 'react';
 import styled from '@emotion/styled';
 
@@ -86,6 +86,9 @@ export const TableSearch = memo(function TableSearch({
     },
     [dispatch],
   );
+  const toggleHideResults = useCallback(() => {
+    dispatch({type: 'toggleSearchValue'});
+  }, [dispatch]);
   const onKeyDown = useCallback(
     (e: React.KeyboardEvent<any>) => {
       switch (e.key) {
@@ -174,12 +177,16 @@ export const TableSearch = memo(function TableSearch({
           suffix={
             <>
               {options.length ? (
-                <RegexButton
-                  onClick={() => {
-                    toggleSearchDropdown(!showHistory);
-                  }}>
-                  <HistoryOutlined />
-                </RegexButton>
+                <Tooltip
+                  placement="topLeft"
+                  title="Show search history (ctrl+f)">
+                  <RegexButton
+                    onClick={() => {
+                      toggleSearchDropdown(!showHistory);
+                    }}>
+                    <HistoryOutlined />
+                  </RegexButton>
+                </Tooltip>
               ) : null}
               <RegexButton
                 size="small"
@@ -200,6 +207,16 @@ export const TableSearch = memo(function TableSearch({
                 title={regexError || 'Search using Regex'}>
                 .*
               </RegexButton>
+              <Tooltip
+                placement="topRight"
+                title="Show/Hide search results (ctrl+t)">
+                <RegexButton
+                  onClick={() => {
+                    toggleHideResults();
+                  }}>
+                  <SwapOutlined />
+                </RegexButton>
+              </Tooltip>
             </>
           }
           onChange={(e) => {