Add clear button to commit tree search filter

Summary:
Add an inline clear button (X icon) to the commit tree search filter input.

When the filter text is non-empty, a small close button appears inside the
text field allowing users to quickly clear the filter with a single click
instead of manually selecting and deleting the text.

Reviewed By: DerekCYu

Differential Revision: D95960785

fbshipit-source-id: 73fa21bbb4b3a4d72023eeadffdf9d8c448e3057

Author: stbfb

addons/isl/src/CommitTreeSearchFilter.tsx

@@ -6,6 +6,7 @@
  */
 
 import * as stylex from '@stylexjs/stylex';
+import {Button} from 'isl-components/Button';
 import {Icon} from 'isl-components/Icon';
 import {TextField} from 'isl-components/TextField';
 import {atom, useAtom} from 'jotai';
@@ -19,9 +20,31 @@ const styles = stylex.create({
     alignItems: 'center',
     gap: '4px',
   },
+  inputContainer: {
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+  },
   input: {
     minWidth: '80px',
     width: '150px',
+    paddingRight: '24px',
+  },
+  clearButton: {
+    position: 'absolute',
+    right: '2px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    cursor: 'pointer',
+    background: 'none',
+    border: 'none',
+    padding: '2px',
+    color: 'var(--foreground)',
+    opacity: {
+      default: 0.7,
+      ':hover': 1,
+    },
   },
 });
 
@@ -30,13 +53,24 @@ export function CommitTreeSearchFilterInput() {
   return (
     <div {...stylex.props(styles.container)}>
       <Icon icon="search" />
-      <TextField
-        xstyle={styles.input}
-        placeholder={t('Filter commits...')}
-        value={filter}
-        onInput={e => setFilter(e.currentTarget?.value ?? '')}
-        data-testid="commit-tree-search-filter"
-      />
+      <div {...stylex.props(styles.inputContainer)}>
+        <TextField
+          xstyle={styles.input}
+          placeholder={t('Filter commits...')}
+          value={filter}
+          onInput={e => setFilter(e.currentTarget?.value ?? '')}
+          data-testid="commit-tree-search-filter"
+        />
+        {filter !== '' && (
+          <Button
+            icon
+            xstyle={styles.clearButton}
+            onClick={() => setFilter('')}
+            aria-label={t('Clear filter')}>
+            <Icon icon="close" size="S" />
+          </Button>
+        )}
+      </div>
     </div>
   );
 }