diff --git a/src/components/collection/Selector/List/Header/Name.tsx b/src/components/collection/Selector/List/Header/Name.tsx index 8041e579f..35f66bb3c 100644 --- 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: ( + + ), + }} onChange={(event) => { onChange(event.target.value); }} diff --git a/src/components/shared/Input/Clear.tsx b/src/components/shared/Input/Clear.tsx new file mode 100644 index 000000000..4c59cb48e --- /dev/null +++ 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 ( + + onClear('')} + size="large" + > + + + + ); +} + +export default ClearInput; diff --git a/src/lang/en-US.ts b/src/lang/en-US.ts index a139ef363..b175d4889 100644 --- 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;