Adding in a clearable input for the filter of collections (#828)

estuary · Nov 21, 2023 · 83956f9 · 83956f9
1 parent 06af395
commit 83956f9
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 0 deletions.
diff --git a/src/components/collection/Selector/List/Header/Name.tsx b/src/components/collection/Selector/List/Header/Name.tsx
@@ -1,4 +1,5 @@
 import { TextField } from '@mui/material';
+import ClearInput from 'components/shared/Input/Clear';
 import { useIntl } from 'react-intl';
 
 interface Props {
@@ -30,6 +31,14 @@ function CollectionSelectorHeaderName({
             size="small"
             variant="outlined"
             value={inputValue}
+            InputProps={{
+                endAdornment: (
+                    <ClearInput
+                        show={Boolean(!disabled && inputValue)}
+                        onClear={onChange}
+                    />
+                ),
+            }}
             onChange={(event) => {
                 onChange(event.target.value);
             }}

diff --git a/src/components/shared/Input/Clear.tsx b/src/components/shared/Input/Clear.tsx
@@ -0,0 +1,39 @@
+import { Close } from '@mui/icons-material';
+import { IconButton, InputAdornment } from '@mui/material';
+import { useIntl } from 'react-intl';
+
+interface Props {
+    onClear: (emptyValue: string) => void;
+    show?: boolean;
+}
+
+function ClearInput({ onClear, show }: Props) {
+    const intl = useIntl();
+
+    return (
+        <InputAdornment
+            position="end"
+            style={{
+                display: show ? 'flex' : 'none',
+                position: 'absolute',
+                right: 0,
+            }}
+        >
+            <IconButton
+                aria-label={intl.formatMessage({
+                    id: 'jsonForms.clearInput',
+                })}
+                onClick={() => onClear('')}
+                size="large"
+            >
+                <Close
+                    style={{
+                        borderRadius: '50%',
+                    }}
+                />
+            </IconButton>
+        </InputAdornment>
+    );
+}
+
+export default ClearInput;
diff --git a/src/lang/en-US.ts b/src/lang/en-US.ts
@@ -1300,6 +1300,10 @@ const Notifications: ResolvedIntlConfig['messages'] = {
     'notifications.paymentMethods.missing.trialPast.instructions': `Please {cta} to continue using Estuary Flow.`,
 };
 
+const JsonForms: ResolvedIntlConfig['messages'] = {
+    'jsonForms.clearInput': `Clear input field`,
+};
+
 const enUSMessages: ResolvedIntlConfig['messages'] = {
     ...CommonMessages,
     ...CTAs,
@@ -1361,6 +1365,7 @@ const enUSMessages: ResolvedIntlConfig['messages'] = {
     ...NotBeforeNotAfter,
     ...Notifications,
     ...Fetchers,
+    ...JsonForms,
 };
 
 export default enUSMessages;